[Resolved] Hide Mobile Header Until Scroll On Front Page

[Jacopo]

Hi there!

I need to hide my header until scroll on my mobile front page (smartphone).

I read this topic https://generatepress.com/forums/topic/hide-header-site-logo-nav-menu-until-scroll-on-front-page/ and the previous one https://generatepress.com/forums/topic/hide-nav-top-menu-logo-until-scroll/. I tried to insert CSS and javascript but it doesn’t work.

Can you help me?

[Leo]

Hi there,

Looking at your current layout, can you try activating this option:
https://docs.generatepress.com/article/navigation-as-a-header/

And deactivate the mobile header option:
https://docs.generatepress.com/article/mobile-header/

Then add this CSS:

@media (max-width: 768px) {
    #site-navigation:not(.navigation-stick) {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    #sticky-placeholder {
        display: none !important;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Jacopo]

Ok. Now I can’t see my header from mobile, but:

1) when I scroll down it doesnt’t appear.

I tried also adding this javascript (from Tom’s old reply) in my wp_footer, no results:

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

2) Header disappeared from all mobile pages, not only my front-page

3) When I activated “navigation-as-header” my desktop header became too narrow. Logo and menu are too close together.

[Tom]

What happens if you deactivate the “Navigation as Header” option, re-activate the Mobile Header option, then add this CSS?:

@media (max-width: 768px) {
    #mobile-header:not(.navigation-stick) {
        visibility: hidden;
        height: 0;
        overflow: hidden;
    }

    #sticky-placeholder {
        display: none !important;
    }
}

Let me know – might need a little tweaking 🙂

[Jacopo]

Now desktop header is ok but i can’t see mobile header when scrolling on any page.

Maybe the javascript is wrong?

[David]

Hi there,

can you remove that JS. And in Customizer > Layout > Header — > Mobile Header enable the Sticky Mobile Header

[Jacopo]

Great advice David, thank you. Now I can see header when I scroll down, but it is a little bit squashed and transparent. And it’s like that on every page.

[Tom]

You can add the white background color to your navigation in Customize > Colors > Primary Navigation.

That should make it much better.

Let me know 🙂

[Jacopo]

Yep. Thank You very much!

[Tom]

You’re welcome 🙂

[Author]

Posts