[Resolved] Hide navigation on top of page, show navigation when scrolling down

[generator]

Hello, I was asked to open another question:

I want to achieve the following:
sticky menu, show only when scrolled down

I thought it would work with just CSS just addressing the main-nav WITH the already existing sticky class, and WITHOUT this class.
So tried the CSS-codes which I found on your page. But both make it disappear permanently.

.main-navigation:not(.navigation-stick) { display: none;}

.main-navigation {
    display: none;
}
.main-navigation.navigation-clone {
    display: block;
}

I want it “display:none” on top of the page
and “sticky + display” when scrolled down

I have the premium version.

[Leo]

Hi there,

Hmm I’m not seeing why that wouldn’t work.

Tom provided a similar solution here:
https://generatepress.com/forums/topic/landing-page-menu-should-hide-by-default-but-appear-when-scrolling-down/#post-170547

Can you link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know 🙂

[generator]

Hello,
I added the URL.
And I deleted my css code again because it hide the navigation completely.
(It should appear when the user scrolled around half of the full screen on top of the page)

[Leo]

Can you try Tom’s instruction here?

Can’t really tell without the code being added in there.

Thanks!

[generator]

Hello, I am back again.
I added Toms code.

With Firebug I can see, when there is NO code the navigation gets further classes like “is_stuck” and “navigation-clone”, but when I ADD the Code these classes are not there, so the code can not work.

Strange. I hope you can help.

[Leo]

Is the sticky navigation turned on?
https://docs.generatepress.com/article/sticky-navigation/

[generator]

Yes, it’s on.

[Leo]

Can you try this CSS here?
https://generatepress.com/forums/topic/only-show-primary-nav-upon-scroll/#post-437915

[generator]

Only this and delete the previous one?
This didn’t work.

[Tom]

Give this a try instead:

#site-navigation:not(.navigation-stick) {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

#sticky-placeholder {
    display: none !important;
}

[generator]

That worked!
Thank you very much for taking the time to help!

[Tom]

Awesome, glad I could help! 🙂

[Author]

Posts