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

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

Viewing 15 posts - 1 through 15 (of 30 total)
  • Author
    Posts
  • #197085
    mc208

    https://www.wpbeaverbuilder.com/support/q/start-with-no-menu-show-only-after-scrolling/

    I want to do what this guy is doing, i.e. hide the top menu, nav menu and logo at the top of the homepage and only have it appear after the viewer begins to scroll down. The CSS given had no effect but I suspect it’s because I’m not using the beaver builder theme. I see that I can disable the primary and secondary navigation for the page, but that totally disables it. I only want to disable those, along with the logo until the visitor begins scrolling down the page.

    • This topic was modified 4 years, 4 months ago by mc208. Reason: added more
    #197136
    Tom
    Lead Developer
    Lead Developer

    You would have to use our Menu Plus add-on.

    Basically, you would add your logo to the menu using the add-on, then you would add this CSS:

    .main-navigation {
        display: none;
    }
    
    .main-navigation.navigation-clone {
        display: block;
    }

    In order to do this to the entire header and secondary navigation, you would need to include javascript which adds a class to those elements as you scroll down.

    #197260
    mc208

    Hmm ok, so it doesn’t sound like this is an easy task, as I don’t know anything about javascript, bummer!

    #197285
    Tom
    Lead Developer
    Lead Developer

    Something like this might work:

    <script>
    jQuery( document ).ready( function( $ ) {
        var $document = $(document),
            $header = $('.site-header'),
            $main_nav = $('.main-navigation'),
            $secondary_nav = $('.secondary-navigation'),
            className = 'hasScrolled';
    
        $document.scroll(function() {
            $header.toggleClass(className, $document.scrollTop() >= 50);
            $main_nav.toggleClass(className, $document.scrollTop() >= 50);
            $secondary_nav.toggleClass(className, $document.scrollTop() >= 50);
        });
    });
    </script>

    That can go in the wp_footer hook in GP Hooks.

    Then add this CSS:

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

    Haven’t tested it, but it should work in theory 🙂

    #200100
    mc208

    This kind of worked, except that it’s doing it on every page. Is there a way to make it so it only happens on the homepage?
    Also, the top menu (above the primary navigation) isn’t showing up anymore with the addition of the code above.

    • This reply was modified 4 years, 3 months ago by mc208.
    #200199
    Tom
    Lead Developer
    Lead Developer

    Add the .home class in front of all other classes (starting with a period) to target only the homepage. You’ll want to do this in the javascript and the CSS.

    For example: $header = $('.home .site-header')

    And: .home .site-header

    The primary navigation is being targeted with the above code using the .main-navigation selector.

    #200374
    mc208

    Hmm if I did it right, it didn’t seem to work. Were there other places I should put .home in front of?
    The secondary top menu still isn’t showing up either.

    I tried another approach and I saved the beaver builder row I created for the hero area, and I inserted it into the content settings for the page header. I checked the option to make it fluid, as well as merge with site header option, but this doesn’t seem to fix the issue either.

    Ideally what I want to do is show my hero header area on the homepage only, with no site logo image and no primary or secondary navigation until the user begins to scroll down.

    • This reply was modified 4 years, 3 months ago by mc208.
    #200418
    Tom
    Lead Developer
    Lead Developer
    #200527
    mc208

    http://goo.gl/mVbjui

    I took out the codes, do you need them in place to see what’s going on?

    #200574
    Tom
    Lead Developer
    Lead Developer
    #200580
    mc208

    Ok, I just put the code and CSS back in there for you

    #200585
    Tom
    Lead Developer
    Lead Developer

    Try this CSS:

    .secondary-navigation.hasScrolled {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
    }
    
    .site-header.hasScrolled {
        position: fixed;
        top: 40px;
        width: 100%;
        z-index: 9999;
    }
    #200594
    mc208

    In addition to, or replace the other CSS? I replaced the previous CSS. When I go to the home page, it didn’t seem to have any effect. Do I need to add that .home anywhere?

    #200667
    Tom
    Lead Developer
    Lead Developer

    In addition to – it will work with the previous CSS to stick those elements to the top of your browser.

    #201111
    mc208

    Still not working, I don’t know where all I’m supposed to put that .home part, but anyways, here is what the CSS I have looks like now:

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

    Does the CSS look right? When I scroll down, I start to see the logo for a split second, but it, along with all of the navigation doesn’t appear.

    • This reply was modified 4 years, 3 months ago by Tom.
    • This reply was modified 4 years, 3 months ago by Tom.
Viewing 15 posts - 1 through 15 (of 30 total)
  • You must be logged in to reply to this topic.