Hi there,
On my new website, I have the following options selected for the header:
At page load, the sticky header has padding beneath the page logo. Upon scroll, the sticky header shrinks 10 – 20px. The bottom of the header comes right up to the bottom of the logo.
I’ve implemented the sticky header on mobile using the code below. On mobile, there is a thin gray border beneath the logo, too. This disappears on a scroll.
@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #header {
position: fixed;
}
.responsive #top #main {
padding-top: 45px !important;
}
}
I’d like the sticky header to be the same size all the time – the “on-scroll size,” with no padding below the logo. Another thread mentioned that shrinking behavior is disabled below 60px, but this doesn’t seem to be the case.
How can I disable the shrinking header behavior completely?
It is much appreciated!
Hey Joe,
Thanks for the link, when I examine your page I found that the top color section had a top margin of 20px which gave the illusion of the header being larger. Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:
#top.home #home {
margin-top: 0px !important;
}
Best regards,
Mike
Hiya Mike,
You’re exactly right. I removed the padding from the top section and it’s working perfectly. Thank you for your help, sir!
This thread is ready to be closed.