Archived topic
Hide navigation on top of page, show navigation when scrolling down
11 replies · Started by generator on July 3, 2018
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.
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 :)
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)
Can you try Tom's instruction here?
Can't really tell without the code being added in there.
Thanks!
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.
Is the sticky navigation turned on?
https://docs.generatepress.com/article/sticky-navigation/
Yes, it's on.
Can you try this CSS here?
https://generatepress.com/forums/topic/only-show-primary-nav-upon-scroll/#post-437915
Only this and delete the previous one?
This didn't work.
Give this a try instead:
#site-navigation:not(.navigation-stick) {
visibility: hidden;
height: 0;
overflow: hidden;
}
#sticky-placeholder {
display: none !important;
}That worked!
Thank you very much for taking the time to help!
Awesome, glad I could help! :)
