Keep the header the same size no matter scroll

When scrolled all the way up, the header enlarges by about 20 px on both top and bottom, I want it to look exactly how it looks when you scroll down.

In other now, the header is bigger at the top, but as soon as you scroll down, the logo padding seems to decrease, therefore, header top and bottom hug the logo. I want it to hug the logo the same no matter being at the top or scrolling, and I want it hugged at the top, just like it does when scrolling.

https://outdoorkitchenspalmbeach.com/bbq-grill-repair/

Hello there,

Please add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header.float-header {
      padding: 20px 0 !important;
    }

Regards,
Kharis

That didn’t do it. It only changes the header you see when scrolling, but when all the up top, my header is still bigger. I’m thinking its a padding default maybe, or a default margin issue. Playing with that CSS now.

Hello there,

Please try this code:

    .site-header.float-header {
      padding: 5px !important;
    } 

Regards,
Kharis

Nah, still didnt work.

Hello there,

Check if your custom CSS code contains any error. You can check it with this tool: https://jigsaw.w3.org/css-validator/#validate_by_input

Regards,
Kharis

Nope, no errors were found

Actually, that does something, but not what I’m looking for. That one takes effect on scroll only. Im fine with the default code for the header when on scroll, what Im after is making the header smaller when scrolled above the fold all the way at top - it that spot the header height increases. Could it be a default padding or margin issue related to my next slider?

Hello there,

What about this one? Doesn’t it change anything?

    .site-header,
    .site-header.float-header {
      padding: 5px !important;
    }  

Regards,
Kharis

THAT DID IT … Thanks!

Great!

You’re welcome! Let us know in a new topic if you need anything else we can help.

Regards,
Kharis