[Support request] Primary navigation – appear only upon scroll.

[ammgbr]

Hi, how can I hide the primary navigation and have it appear only upon scrolling down?

I think there is a CSS solution back from a few years ago but this might be out of date.

[Ying]

Hi there,

Try this:

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

[ammgbr]

Thank you that’s resolved! 😀

[Ying]

You are welcome   🙂

[ammgbr]

Apologies for the follow up, is it possible to have this CSS work only for the home page and not the rest of the website?

[Ying]

Yes, you just need to add .home to the selector:

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

[ammgbr]

thank you:)

[Ying]

No Problem 🙂

[ammgbr]

Apologies for coming back to this, the solution works for desktop but not for mobile. Is it possible to make it applicable to all devices??

[Fernando]

Hello there,

Try replacing the code you have with this:

.home nav#mobile-header:not(.is_stuck) .inside-navigation.grid-container.grid-parent, .home .main-navigation:not(.is_stuck) {
    display: none;
}

[ammgbr]

Thank you 🙂

[Fernando]

You’re welcome! 🙂

[ammgbr]

Hi, the above code stopped working on mobile. Is there anything I should amend in the css above?

[Leo]

That CSS should still work – nothing has changed on our end.

I’m not seeing it being added either so I’m assuming that there is a syntax error somewhere as mentioned in your other post.

You can move it to the top of all your CSS to test as well.

[Author]

Posts