Primary Navigation Background Color for Mobile

Hi there,

can you share a link to your site, and let me know what color you want the Mobile header ?

Hi,

Yes. Info in private area. I want the mobile header to be white/transparent as it is as default. Only the dekstop header to be purple.

Can you set the customizer option for the desktop color you want, then we can provide the CSS specifically for mobile?

Let me know :)

I've set the customizer option for dekstop.

Hi Georgi,

The quick and easy way to add a different background color for mobile-header would be this CSS:

@media (max-width:768px){
    nav#mobile-header {
        background-color: red;
    }
}

Here's how to add css - https://docs.generatepress.com/article/adding-css/

You can change red to your preferred color. :)

Let us know if you need further help.

Thanks, Elvin!

I added it to already existing CSS:

@media (max-width: 768px) {
    .main-navigation.has-branding .inside-navigation.grid-container {
        flex-wrap: nowrap;
        background-color: white;
    }

It works, so I guess this is not a mistake I did it this way instead of separate CSS? If so you can mark the thread as resolved :)

Ah yes that can work as well since .main-navigation is also a selector(class) of #mobile-header.

This should tidy things up. :)

Marking this as resolved. Let us know if you need further help. :D

One more thing actually - I didn't have working mobile menu and just fixed it by assigning an off canvas menu and noticed that its purple there too :D Can I make it white? https://prnt.sc/26m8abe

Ah that's one issue in using .main-navigation.

This particular CSS is used on BOTH the offcanvas menu and the mobile-header. That's actually why I recommended using #mobile-header so it will specifically apply to the #mobile-header only. :)

Considering reverting the change you've made on .main-navigation and apply the color through my suggested CSS. :D

M, I reverted the change on .main-navigation and applied the color through your CSS but it didn't affect the offcanvas menu. Only the mobile header.

M, I reverted the change on .main-navigation and applied the color through your CSS but it didn’t affect the offcanvas menu. Only the mobile header.

Yes that was the intended behavior. Were you aiming for something else?

This would be the expected css your site should be using if you only want the color purple on the mobile-header and ensure the offcanvas has white.

@media (max-width:768px){
/* Mobile header bar */
    nav#mobile-header {
        background-color: purple;
    }
/* Off-Canvas panel */
    nav#generate-slideout-menu .inside-navigation {
        flex-wrap: nowrap;
        background-color: white;
    }
}

The goal is to have the mobile header and offcanvas white. With this CSS now it can be achieve. Thank you :)

Another problem I'm facing is that the cart and search icons in the mobile header are white too so they cant be seen. How can I change their color specificaly for mobile header?

You can add this in on the @media rule for mobile.

nav#mobile-header .menu-bar-items span.gp-icon svg {
    fill: white;
}

M, I actually can't get it to work when adding it to this code:

@media (max-width:768px){
/* Mobile header bar */
    nav#mobile-header {
        background-color: white;
    }

Tried putting it several ways, none was successful.