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

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

Home Forums Support Hide nav & top menu, logo until scroll

Viewing 15 posts - 16 through 30 (of 30 total)
  • Author
    Posts
  • #201114
    Tom
    Lead Developer
    Lead Developer

    I just editing your CSS – try it now πŸ™‚

    #201118
    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 =(

    #201134
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #201137
    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?

    #201138
    Tom
    Lead Developer
    Lead Developer
    #201139
    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!!

    #201140
    Tom
    Lead Developer
    Lead Developer
    #363413
    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?

    #363432
    Leo
    Staff
    Customer Support

    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! πŸ™‚

    #363438
    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?

    #363468
    Leo
    Staff
    Customer Support

    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!

    #363477
    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 πŸ™‚

    #363484
    Leo
    Staff
    Customer Support

    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 πŸ™‚

    #558865
    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.

    #559198
    Leo
    Staff
    Customer Support

    Hi there,

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

    Thanks πŸ™‚

Viewing 15 posts - 16 through 30 (of 30 total)
  • You must be logged in to reply to this topic.