I’ve run into this more than once, and every time I’ve forgotten how I did it last time and have to find out again how to do it. This article is a reference for my own use – and if you’re reading it, hopefully it’ll be of some use to you as well.
Add a Full-Width Responsive Header in a Genesis Theme
Required:
Code editor (I use BBEdit on the Mac)
FTP access (I use Transmit)
There’s a lot of old, conflicting information about this problem floating around in the Google index.
StudioPress and WordPress have each taken partial steps to solve this problem, but their solution for using a custom header image that works so well in the general case fails when the image is full width.
Here’s what works as of this writing:
1. Back up your child theme’s style.css and functions.php files locally, in a different location than your work copies. Make the changes on your machine, then ftp them up to the server.
2. Disable theme support for custom header in functions.php.
Find and delete the lines below in your funtions.php file:
// Add support for custom header. add_theme_support( 'custom-header', array( 'width' => 1140, 'height' => 244, 'header-selector' => '.site-header .title-area', 'header-text' => false, ) );
3. In your WP Admin/Customizer/Site Identity, select /Use for site title/logo>Dynamic Text (if it isn’t already)
If you see this, you’ve successfully deleted theme activation for custom headers in your functions.php
4. Create your header in the desired starting size (1140×200, for example) – make a note of the dimensions.
5. Upload your image to the media library, copy the url, put it aside in a text document to use in step 5
6. In your css, find and define:
.header-image .site-title a {
background: url(‘your-image-url’);
background-repeat: no-repeat;
float: left;
margin: 0;
max-width: ####px;
min-height: ###px;
padding: 0;
width: 100%;
background-size: contain !important;
}
You should see your image ! So far so good.
I’m seeing a double images when the viewport gets smaller!
The background-size: contain; property and attribute have an interesting bug. When the viewport gets smaller than the original image, you still see the full size image behind the “contained” version of it.
You need to modify your min-height property in your media queries – otherwise you will see a double image at smaller device sizes (which is your responsive image overlaid over the original).
Your media queries look like this:
@media only screen and (max-width: ###px) {
[rules]
}
Try resizing your viewport, either by dragging the browser window corner or using responsive developer tools. When your layout starts to look wrong, make a note of the viewport size.
For each viewport variant, use Developer Tools or Firebug to find a value that works at the widest and narrowest widths before the next media query size.
When inspecting the element, you should see the .header-image .site-title a in the css pane. Adjust the min-height value until it looks right. Copy the ### that works.
Paste this line at the bottom of each media query block in your style.css (don’t overwrite the closing “}” )
.header-image .site-title a {
min-height: ###px;
}
Input the ### into your css, save and upload.
Need help? Hit the site form.
Leave a Reply