How to change the color of the Off Canvas Menu strip and "Menu" font color?

[Yang]

Hi,

I am developing my site with GP Premium 1.9.1.

I am using the Off Canvas Menu Overlay. But I want to change the color of the menu strip (the three white lines) on my desktop and also the font color “Menu” on mobile?

What CSS should I add for this?

Thanks!

[Leo]

Hi there,

This CSS should change the toggle on desktop only:

@media (min-width: 769px) {
    .slideout-toggle:not(.has-svg-icon) a:before {
        color: #000000;
    }
}

Then this CSS should change the mobile menu label:

span.mobile-menu {
    color: #000000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Yang]

Hi Leo,

Thanks! This works.

How could I change the color of toggle on the Mobile as well?

[Leo]

If you want to use the same color for the toggle and the label then this should work:

button.menu-toggle {
    color: #ffffff !important;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Yang]

Thanks Leo! This works now.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts