How To Make Header Image in A Responsive With The Genesis Framework

Responsive design is an important feature of a good website.  The ability of your site to adjust to different screen sizes and still look good is something that visitors remember.  If you are using a good WordPress theme and framework, responsiveness is often built into the design.  Even then, you might run into a few issues.

ScanThisGuide.com before any changes (besides changing the header image size)

I just launched a site, ScanThisGuide.com, using theFocus child theme built on the Genesis framework.  Everything was going well with the design until I checked it on my iPhone.  The site looked great except for the header.  After a little digging around on Google, it seems that other users are having similar problem.  After a little more digging, I found several possible solutions, including a plugin and some extensive code changes, but one that stood out to me because it was simple.

(The Focus child theme and the Genesis framework are both great products I personally use.  If you buy using these links, I get a small commission.  Not much, but it doesn’t cost you anything extra and I can go buy a cup of coffee.)

A special thanks to Antonios007 from GitHub where I learned of the CSS changes  that needed to make for the header image to be more responsive.

Resize the header image

During the site design, the header image that I wanted to use was much smaller than what the Focus child theme was setup to handle.  To add a custom header image to the Focus child theme, you go to Appearance->Header under the WordPress admin dashboard.  Once there, you can upload and crop your header image.  The problem I ran into was the size and aspect ratio it wanted.

Apparently, there is no way to upload an image that is not 1060px wide and 120px without cropping and re-sizing.  My image is 390px wide and 130px tall.  After a little Google research and experimentation, I found the place where the Focus child theme added a custom header to the Genesis framework (in functions.php):

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 1060, 'height' => 120 ) );

As you can see, the width and height are both specified.  Here’s a screenshot of  what it looked like originally when uploading a custom header:

Notice that the header image needs to be 1060px by 120px to be used as-is.  If you upload an image of a different size, you must crop it using the same proportions. Since my image was 390px by 130px, I changed the specified width and height in the functions.php file.  Here is what it looks like now:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array( 'width' => 390, 'height' => 130 ) );

A simple but important change.  Let’s see what it looks like when adding a custom header after the change:

ScanThisGuide.com after making the header responsive but without a custom header size

As you can see, the dimensions of the required image is the same size as my header image.  Once uploaded, the header image will be displayed properly.

This step is important to the responsive header image but I had no idea until I started tweaking.  If the header image is kept the full 1060px wide, the result is like the image to the right.  Since the logo is small, the most interesting part of the header image is hard to see.  This detail was not obvious until the changes below were made.

Editing the CSS code for small screen sizes

The CSS code controls almost everything about the design of your website, including the colors, positions, and even how it is displayed on certain devices.  Looking at the style.css for the Focus child theme, you will see the code that controls the responsiveness of small screens.  Near the bottom of the file you will see this line of code:

@media only screen and (max-width: 600px) {

Anything under this declaration block will modify what happens when a small screen views your site.  This section is the one that controls the formatting when your site is viewed on an iPhone or other small screen.  Looking at the file provided by Antonios007 from GitHub, the following lines of code need to be added under this declaration block:

#header {
     background-size: contain !important;
     height: 110px; /* original: min-height: 100%; */
     overflow-y:hidden;
}

Notice that part of the second line changed.  The original code snippet from Antonis007 set a minimum height of 100%.  In effect, this set the height of the header to 100% of the height the header image.  Unfortunately, my header image was too wide, resulting in the screenshot at the top of the page.  The height was specified to be 110px, a value that was determined through trial and error once the header image was responsive.

Editing the CSS code for the Image Header – Partial Width

The last piece of the puzzle was a small change in the main body of the styles.css file.  It can be quickly found by doing a search in the browser.  The code that needed to be changed is as follows (colored red):

/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
     display: block;
     float: left;
     height: 100%; /* height: 120px; */
     overflow: hidden;
     padding: 0;
     text-indent: -9999px;
     width: 400px;
}

Instead of specifying the height to a specific size (the commented property), you need to change it to 100%.

Once these changes were made, the header image is now responsive.  Take a look:

ScanThisGuide.com after all changes

Notice that the logo fills the width of the screen.  At this point, it would be fairly easy to tweak the size and placement of the header image for small screens.  Be sure to check your page on different devices to make sure it looks right.  For this site, anything larger than an iPhone turned out fine since the width of the header image was less than the width of the screen.

Congratulations, if you are using the Focus child theme or a similar theme, you should be able to modify your code enough to have your very own responsive header image.  If you are looking for a great responsive theme, be sure to check out theGenesis framework.  Remember, having a responsive web site is an important part of the user experience.  Having a consistent look to your site across multiple devices will help visitors identify with your brand and have a better experience.  Good luck.