How to keep the header / sticky menu at its initial size and fixed?

[jhodgski]

When I scroll down from the top, the header gradually disappears until it jumps back at a smaller size.

How can I make it so that the header is fixed at the top all the time, and its height is not reduced?

[Nexus]

Pls reply as a private message here with the site URL and a temporary login to the WordPress dashboard and I can take care of this for you. Thanks!

[jhodgski]

This reply has been marked as private.

[allanhalme]

Would it be possible to get a description of the solution to this? thanks

[jhodgski]

Can I mention, too, that I would like the small-screen behaviour for the header to remain unchanged – i.e., so it just remains a simple, static element.

[Nexus]

I have put the below code to custom css in the theme options.

#header.sticky .wrap {
min-height: 100px;
}

#header.sticky #site-logo {
top: 30px;
}

#header.sticky #primary-menu > ul.menu > li > a {
line-height: 100px;
font-size: 18px;
}

The values may vary depending on the logo size. The top: 30px value for the logo is optional if you want to make the sticky header height exactly same as the normal one. And since you ask, this change is upgrade proof. Thanks!

[jhodgski]

Great stuff, thanks.

By the way, I also added…

#header {
    position: fixed;
}

…to stop the header scrolling off the page.

[Raghavendra]

Great. Thanks for letting us know 🙂

[erwinvee]

Great fix!

[Author]

Posts