Primary nav below header, mobile nav in Top Bar?

You could try:

1. Enabling the Mobile Header: https://docs.generatepress.com/article/mobile-header/

2. Moving the mobile header above the site header with some PHP:

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_after_header', 'generate_menu_plus_mobile_header', 5 );
    add_action( 'generate_before_header', 'generate_menu_plus_mobile_header' );
} );

3. Forcing the site header to show on mobile even though the mobile header is used:

@media (max-width: 768px) {
    .site-header {
        display: block !important;
    }
}

That should get you very close :)

Thanx a lot! It works.

Just copied your code and it was fine except for resetting the opacity for the header:

@media (max-width: 768px) {
    .site-header {
        display: block !important;
        opacity: 1; /* was 0 */ 
    }
}

The rest was just adjusting the layout to suite my site.

I'll post a link once the site is online ;-)

Awesome - thanks! :)

The site is now online, and here is the link I promised:

https://groningen-info.de/

The desktop version has a different header/menu order than the mobile version.

Looks great! :)

Something has changed!

On mobile
- the navigation with menu and search is still visible on top alright
- but the .site-header with logo on white background underneath has disappeared!

As a result my visitors on mobile can't see the site identity. Is this maybe due to changes in Customizer > Layout > Header? This "Branding Type" is something I cannot recall having seen before.

Anyway. The culprit seems to be the following rule:

.site-header, #site-navigation, #sticky-navigation {
    display: none !important;
    opacity: 0.0;
}

Is that new? It is Inline CSS in the header: "generate-navigation-branding-inline-css"

If in a devtool I remove .site-header from the selectors everything is fine, but I can't seem to fix that in my child-theme CSS.

The rule I have in my child theme CSS for .site-header (see #770511 above from Tom) is overruled by above quoted rule.

SEEMINGLY SOLVED ;-)

Autoptimize has two options to aggregate CSS:

- Aggregate CSS-files?
- Also aggregate inline CSS?

I had activated only the first option. In that case the load sequence is
1. Child-Theme-CSS
2. GP's Inline CSS.
So the Inline CSS wins against my Child-Theme-CSS on "source order" (as described above).

If both are activated the sequence is
1. GP's Inline CSS first
2. Child-Theme-CSS.
So my Child-Theme-CSS wins.

!important *and* source order. We can't take the cascade much further then this ;-)

Glad you found the solution! Thanks for posting it here :)