Full Width Responsive Header Image In Genesis

Most themes include the following code in the child themes functions file you can modify to add a full width responsive header image to your Genesis child theme.

add_theme_support( 'custom-header', array(
	'width'           => 1080,
	'height'          => 120,
	'header-selector' => '.site-title a',
	'header-text'     => false
) );

And then you can modify the values for the width under the Site Header section of your child themes style.css file to match your full width image dimensions.

.header-image .site-title a {
	background-color: transparent;
	max-width: 1080px;
	min-height: 120px;
	padding: 0;
}

This is what you get on a desktop computer with a large screen:

While that method enables you to add a full width header image in any Genesis child theme, it doesn’t make the header image responsive on smaller screens.

Not Responsive

This is what you get on smaller screen widths:

It cuts off the header image when you reduce the screen width.

Responsive

Members can login to get the code which enables you to get this on any size screen:

Demo Video

Here’s the solution for members:

Related Tutorials

• 2 New Ways to Add a Full Width Header Image