[Resolved] Different colours for collapsed mobile menu

[David]

Hello, is there a way how to set different colours for collapsed mobile menu? I see only one colour scheme in customizer for both desktop and mobile menu.

[Tom]

Hi there,

The mobile menu inherits the desktop menu colors as of right now.

We can use CSS, though. Are you trying to change the colors of the mobile menu bar, or the entire mobile menu (bar + items).

Let me know 🙂

[David]

The bar + items. :DM.

[Tom]

Right now your navigation is merged with the page hero, which is why it doesn’t have any color. Have you considered turning off the merge option on mobile?: https://docs.generatepress.com/article/header-element-overview/#site-header

As for the CSS, try this:

@media (max-width: 768px) {
    .main-navigation,
    .main-navigation ul ul {
        background: #222222;
    }

    .main-navigation .main-nav ul li a, 
    .menu-toggle {
        color: #ffffff;
    }
}

[David]

That has solved everything, thank you. :DM.

[Tom]

You’re welcome! 🙂

[Author]

Posts