Archived topic
Hide Header, but enable sticky navigation
5 replies · Started by Stefan on September 1, 2021
Hey there,
I would like to hide the header but leave the sticky navigation enabled. So that the user sees the navigation only after scrolling.
I have tested with different "display none" variants but did not get a good result.
Do you have any idea how to do it?
Hi there,
thats a tricky one.
Can you share a link to your site where i can see the sticky nav, might be able to figure it out ...
Sure: https://luebeck-zwischenzeilen.de/podcast
Thanks!
You would need to use the Navigation as Header option in Customizer > Layout > Header.
Then you could try this CSS to hide the navigation when it wasn't sticky.
.sticky-enabled .main-navigation:not(.is_stuck) {
opacity: 0;
pointer-events: none;
}
Wow, fabulous!
That works! Thanks a lot.
Awesome - great looking site !