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:
Leave a Reply