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

[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 7 years, 10 months ago by mc208. Reason: added more

[Tom]

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.

[mc208]

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

[Tom]

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 🙂

[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 7 years, 10 months ago by mc208.

[Tom]

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.

[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 7 years, 10 months ago by mc208.

[Tom]

Can you link me to the site?

[mc208]

http://goo.gl/mVbjui

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

[Tom]

Yes please 🙂

[mc208]

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

[Tom]

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

[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?

[Tom]

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

[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 7 years, 10 months ago by Tom.
• This reply was modified 7 years, 10 months ago by Tom.

[Author]

Posts