Header height on tablet and mobile

This is my site: https://tinyurl.com/yxj8cjk3

I need to optimize the load speed of the home page and the site overall.
The header image was one thing slowing it down. The link above is one page where the header was showing.

I would like to consider the following:

  1. Remove the header image completely, and instead just show a black color. The site is currently set up for that and I configured the header height to be 225 instead of the default 300. However, on mobile/desktop it looks really bad (too much black under the menu). Is there a way to fix it just for mobile/tablet? Desktop looks ok.
  2. Is there a way to render black color with a given header height instead of an image?

Thank you.

Hello,

Try to use the following CSS code instead of using header image.

You can add CSS code in Customize → Additional CSS section.

#masthead.fixed {
    border-bottom: 1px solid #1c1c1c;
    transition-duration: 0.5s;
}

#masthead:not(.fixed) {
    border-bottom: 55px solid #1c1c1c;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you for the reply. It works but it also overlaps (i.e., sits on top) of the slider images on my home page. Is there a way to apply this change to all pages where there would be a header image and not the home page? The header image was not appearing on the home page.

Hello, try this CSS code instead of previous:

#masthead.fixed {
    border-bottom: 1px solid #1c1c1c;
    transition-duration: 0.5s;
}

body:not(.home) #masthead:not(.fixed) {
    border-bottom: 55px solid #1c1c1c;
}

Kind Regards, Roman.

Thank you. We’re almost there.
Is there a way to make the height smaller for mobile? It doesn’t look right for mobile. Desktop looks fine though.

Thank you again .

Hello, try to add this CSS code in addition to previous:

@media (max-width: 1024px) {
    body:not(.home) #masthead:not(.fixed) {
        border-bottom: 25px solid #1c1c1c;
    }
}

Kind Regards, Roman.

Thank you. Sorry, but there’s a follow-up question here.
The whole point was to remove the header image completely (so it’s not served to the client). So now when I go to the header settings and remove the image, the text jumps up to the top of the page, and the ribon with the site name and tag line is covering the text. In other words, it looks like, when the image is removed, the text jumps up in the number of pixels equal to the height of the image. Any idea how to fix that in css?

Hello,

You can try to set something like 160 for top padding in Customize → General section.

Kind Regards, Roman.

Perfect. Thank you all!

Great, you are welcome!

Kind Regards, Roman.