[Resolved] Only show primary nav upon scroll

[allan]

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,

[allan]

edit:

check site here: http://TheHollywoodAvenue.com/home

[Tom]

Hi there,

The navigation isn’t displaying at all for me right now – can you check?

[allan]

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,

[Leo]

You are using Elementor navigation for that page?

If so you will have to ask them how to achieve this.

[allan]

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,

[Leo]

Hmm I’m not sure if that’s a good idea to use both navigation.

Why couldn’t you just choose one?

[allan]

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.

[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;
}

[allan]

thanks Leo.

[Leo]

No problem!

[Author]

Posts