Archived topic
Any Way to Make My Header Sticky (Not just the menu)
5 replies · Started by Milos on March 9, 2021
Hello. As the title says, is there any way to just make the complete header be sticky? When I select the sticky navigation, my mobile looks the same, simply because that's what's in the navigation. But for Tablet/Desktop, it changes as soon as I scroll down, and strips away some of the formatting, the logo, etc.
I added the logo into the Sticky Navigator Customizer, but for tablet/desktop, the location of the items in the header is different, as is the formatting, etc.
Thank you!
Hi Milos,
If you don't need the sticky transition, then you could disable the sticky navigation in customizer and use this CSS instead:
header#masthead {
position: sticky;
top: 0;
z-index: 2;
}Thank you, I don't need any transition. This works well, the only problem is on desktop/tablet widths, when I scroll down to pretty close to the bottom, the menu disappears.
Specifically, rather than disappearing, it almost appears like it is going under that specific element on my page. It seems to be disappearing under that specific content.
Yes, you are right, the header was covered by the GB container section. :)
Try the edited CSS here:
https://generatepress.com/forums/topic/any-way-to-make-my-header-sticky-not-just-the-menu/#post-1688785
Thank you, that worked perfectly.
You are welcome :)
