Archived topic
Only show primary nav upon scroll
10 replies · Started by allan on November 27, 2017
Hello Tom and Team,
I need my primary menu to show only upon scroll and have it as a sticky menu.
please see screenshot of the issue: https://thehollywoodavenue.com/for-gp-support/
I tried this code:
#site-navigation:not(.navigation-stick) {
visibility: hidden;
height: 0;
overflow: hidden;
}
-> Sometimes however, after i scroll down and scroll way up again, it still shows the menu. I wanted to have the menu on "hide" after scrolling way up.
THanks,
edit:
check site here: http://TheHollywoodAvenue.com/home
Hi there,
The navigation isn't displaying at all for me right now - can you check?
Hi Tom,
I also have the same problem in "incognito" browser. Nav is not showing.
Are you seeing a coming-soon page? if so, pls check: https://thehollywoodavenue.com/home/
thanks,
You are using Elementor navigation for that page?
If so you will have to ask them how to achieve this.
HI Leo,
both actually. so what i was trying to achieve was use elementor and GP nav at the same time. but need to hide GP nav before the scroll and show only upon scroll. and once i scroll back up, hide GP nav again.
thanks,
Hmm I'm not sure if that's a good idea to use both navigation.
Why couldn't you just choose one?
hahaha. because i don't know how to do it. I'm confused how to make a transparent and sticky header. can you send me a link on documentation or how-To's on headers.
thanks Leo.
If I understand you correctly, here is what you want:
- Hide navigation on first load
- Show sticky navigation on scroll with transparent background
If so then you should be able to choose the navigation color in the customizer (Colors > Primary Navigation), then just hide the navigation on first load with this CSS:
.main-navigation:not(.navigation-stick) {
display: none;
}thanks Leo.
No problem!
