Whitespace below header image

www.bigsmitty.com

my header is the suggested 1920px wide. however, on screens below this width whitespace appears below the header image where it has shrunk to fit. how can i automatically move the navigation up to the bottom of the header, regardless of screen width?

Hello there,

As you want the image entirely be visible, you need to disable the header background image which is applied by default and show the image object. It can be done by adding this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


.site-header {
  height: auto !important;
}

.has-banner:after {
  display: none;  
}  

.header-image {
  display: block;
}

Regards,
Kharis

looks like i was on the right track, just missing the “!important” part in my trials.

many thanks!

Awesome!

You’re welcome.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

when using this code in the advance CSS box all the header images are cut in half the size. Please help.

Robert

Hello Robert,

It depends on the original height of your image. You should use higher imager.

Regards,
Kharis