Hide Entire Header but Still Shows the Sticky Header

Hi there,

can you enable the sticky navigation on your site and provide me a link to the page where you want the nav to be hidden until scrolled.

Hi David,

Thanks for the reply.
Okay, Please check the link below.

I want to hide it until it is scrolled on a half of hero section and I want to hide it on the front page only.
Note: the Entire Header is including the Top Bar too.

Thank you and have a nice day.
Riz

So this CSS will hide the Navigation until scrolling when it becomes sticky and only on the front page:

.home .main-navigation:not(.is_stuck) {
    display: none;
}

As the Top Bar is not part of the navigation it won't be part of it or the sticky nav.
You can try adding this PHP Snippet to move the Top Bar inside the Navigation:

add_action('wp', function(){
    remove_action( 'generate_before_header', 'generate_top_bar', 5 );
    add_action( 'generate_inside_navigation', 'generate_top_bar', 1 );    
});

This doc explains how to add PHP: https://docs.generatepress.com/article/adding-php/

Thank you David,

It works. But we need one more finishing touch. Now all the CSS seems to inherit from the main navigation. Do you have CSS or something to make it work perfectly? For example, move it back from the top bar alignment on the left and make the font size is smaller.

Many thanks...

Looks like all the parts of the Top Bar are Block built using GenerateBlocks - is that correct ?

If so you can just edit those blocks and set the specific styles you need.
You could even remove the Topbar altogether and build it in a Block Element and hook it into: generate_inside_navigation

Yes, I use it on the top bar widget.

As for that hook, I don't think it's a good idea. I've tried it before hitting this forum support. But the result is not better than your earlier solution.

By the way, thank you for the support, David.
Have a nice day.

Glad to be of help