Hide Mobile Header Until Scroll On Front Page

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

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.

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

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

Maybe the javascript is wrong?

Hi there,

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

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.

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

That should make it much better.

Let me know :)

Yep. Thank You very much!

You're welcome :)