Archived topic
Fixed Header and Primary Navigation
5 replies · Started by John on November 16, 2016
Hi Tom,
I have applied the code to fix the header you provided below and it works fine. My problem is that my primary navigation (below header) disappears when I add the css. I want to have a sticky header and the primary menu navigation still appear. When you scroll down, I only want the header to remain fixed, the menu can go away.
Thanks for your help!
If your navigation isn't inside the header, you would have to do this: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579
Tom,
It appears that when you create the static header that the menu gets pushed to the very top of the page causing it to be hidden beneath the header.
I don't know if it is the right way, but I was able to get it back using the following code:
.site-header {
position: fixed;
z-index: 2000;
top: 0;
width: 100%;
}
.main-navigation {
position: fixed;
margin-top: 100px;
z-index: 2000;
width: 100%;
}
.container {
padding-top: 150px;
}
The best way to do it is to scrap that CSS and use the method I explain here: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579
That way your header/navigation won't conflict.
Thanks again for the help.
I have GP Premium and use a child theme.
I removed my css and used yours. Instead of using hooks, I hard coded it into the header.php file in my child theme (easier for me to remember that way).
Everything works now!
Cool :)
