Site logo

Archived topic

Hide Header, but enable sticky navigation

5 replies · Started by Stefan on September 1, 2021

Viewing posts 1–6 of 6

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 ...

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 !

This archived topic is closed to new replies.