[Resolved] Hide nav & top menu, logo until scroll

[Tom]

I just editing your CSS – try it now 🙂

[mc208]

That fixed the home page for the main navigation. Secondary navigation is missing. Also, on other pages, no navigation is showing, only the site logo is showing…. Getting closer. I wouldn’t have embarked on this if I knew it was going to be so much work to get this idea to work =(

[Tom]

Getting close – sometimes things take a lot of tweaking to get working right, that’s just web development 🙂

Try this:

.home .site-header, 
.home .main-navigation, 
.home .secondary-navigation {
    display: none;
}

.home .site-header.hasScrolled, 
.home .main-navigation.hasScrolled, 
.home .secondary-navigation.hasScrolled {
    display: block;
}

.home .secondary-navigation.hasScrolled {
    position: fixed; 
    top: 0; 
    width: 100%; 
    z-index: 9999;
}

.home .site-header.hasScrolled {
    position: fixed; 
    top: 40px; 
    width: 100%; 
    z-index: 9999;
}

[mc208]

you’re right, it IS getting closer! The other pages seem to be fine now. Only issue on the home page now is that the secondary (top) navigation menu isn’t showing up. But now that I think about it, it is supposed to disappear when you scroll down which means it will never be visible on the homepage and that’s probably not good either! Crud.. now after all that, I am rethinking this whole idea of hiding the menu until scroll down. What do you think?

[Tom]

I’m seeing the secondary navigation: http://screencast.com/t/v1eChIpL

[mc208]

You’re right, the admin login thing at the top was covering it, as soon as I logged out it showed up. I think it’s good now – thank you for your help again!!

[Tom]

You’re welcome 🙂

[David]

This is cool Tom, but would it possible to have it show the sticky navigation on scroll down, so that it matches the rest of the site pages when sticky navigation is being used with a reduced depth?

[Leo]

Hi David,

Not too sure what you mean? Would something like this help? https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

If not then it might be best to open a new topic and give a little more info on what you would like to achieve.

Thanks! 🙂

[David]

Hi Leo, thanks for the quick response, I followed this topic and used Tom’s code on a site I’ve just started and it worked great, but I am using sticky navigation on all pages with a reduced depth compared to the main nav, so wanted the sticky nav to appear on the home page when I scroll down instead of the standard main nav appearing when I scroll down.

Another thing I am now trying to figure out is how to add a transparent background color to the sticky nav, is this possible?

[Leo]

Sorry still not quite sure what you mean about the depth part. Any chance you can link me to the site?

Preferably in a new topic 🙂 This post is over a year old and sticky navigation has been rewrite since then.

Thanks!

[David]

Hi Leo
Thanks again for quick response, still on local dev at the moment. I’ll see if I can figure this out and if not open a topic when the site is online.
Thanks again 🙂

[Leo]

Ok sounds good.

Gonna take a guess that something like this might be what you are hoping to achieve? https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

A screenshot might also help as well 🙂

[generator]

Hello,

I want to achieve the same:

sticky menu, show only when scrolled down

I 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.
Already created the Split Menu, but everything else is still quite on default.

[Leo]

Hi there,

Any chance you can open a new topic for your question?

Thanks 🙂

[Author]

Posts