[Resolved] Primary nav below header, mobile nav in Top Bar?

[Peter]

I have found a web site with an interesting layout that I would like to create with GeneratePress.

1. DESKTOP
The desktop layout comes with

– Top Bar with background-color
– Header with logo
– Primary navigation

That is straightforward with GP, but here comes my question:

2. ON MOBILE

Would it possible to switch this around on mobile only to

– Primary navigation with background-color instead of Top bar
– Header with logo
– no primary navigation below header

Thanx in advance
Peter

[Tom]

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 🙂

[Peter]

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 😉

[Tom]

Awesome – thanks! 🙂

[Peter]

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.

[Tom]

Looks great! 🙂

[Peter]

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.

[Peter]

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 😉

[Tom]

Glad you found the solution! Thanks for posting it here 🙂

[Author]

Posts