NOTE – The below changes should be made in a Child Theme – do not modify theme files directly.
This is a bit of a complicated fix, but it does actually fix this issue and the image resizes dynamically based on the screen size.
1) Create a clear PNG that is 1600px by230px
2) Upload this image somewhere accessible
3) in the header.php file insert an image call like this:
<header id="masthead" class="site-header" role="banner">
<img src="URL_OF_IMAGE.png" class="clearfix">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
4)in custom-header.php change the background-size to 100%
.site-header {
background: url(<?php header_image(); ?>) no-repeat scroll top;
background-size: 100%;
}
5) In style.css add a new line in 4.1 Site Header
.site-header .clearfix {
width: 100%;
}
Essentially what’s going on here is the clear image acts as a retainer for the space where the header image is.
This will not work for sites that have the tagline copy in use as it bumps all that down to the next line. In my case, I had this embedded in the header image and didn’t need the tagline.
