[Resolved] Change Background Color of Mobile Menu Hamburger

[Jeffrey]

Hello, I’m trying to change the background color of the hamburger icon for my mobile/tablet menu (not the entire menu bar).

I’ve tried this code as seen in other forum topics:

.mobile-menu-control-wrapper .menu-toggle, .mobile-menu-control-wrapper .menu-toggle:hover, .mobile-menu-control-wrapper .menu-toggle:focus, .has-inline-mobile-toggle #site-navigation.toggled {
    background-color: green;
}

But it doesn’t seem to work on my site. Maybe the selector I’m trying to use is wrong? I’m using the off-canvas panel, which might change things.

Thanks in advance for your help!

[Fernando]

Hi Jeffrey,

Yes, you need a different selector. Here is a CSS you may try adding in Appearance > Customize > Additional CSS:

#mobile-header span.gp-icon.icon-menu-bars {
    color: rgb(0, 255, 0);
}

Kindly modify rgb(0, 255, 0) to your preferred color value: https://www.w3schools.com/colors/colors_picker.asp

Hope this helps! Kindly let us know how it goes. 🙂

[Jeffrey]

Hi Fernando,

Thanks for the response. The code only changes the hamburger bars, and not the background (please see my website to see what I mean). I would like to have white bars over a green background.

I tried changing the color property to background-color, though this doesn’t seem to work.

[Fernando]

Sorry, I misread.

Tested this code and it seems to be working:

#mobile-header span.gp-icon.icon-menu-bars {
    background-color: rgb(0, 255, 0);
    padding:3px 3px 6px 3px;
}

See how it looks: https://share.getcloudapp.com/QwuLdbRK

Added padding as well if you would like to add one.

Hope this helps! Kindly let us know how it goes. 🙂

[Jeffrey]

No problem. This code is working, but there’s some sort of bug occurring. When I change the code in the editor (such as the padding or rgb color), it resets and no longer works. I can work around this by changing the code and pasting it in, but this is pretty strange behavior that I haven’t seen before. Have you guys encountered something like this?

[Fernando]

This is weird behavior indeed. I personally haven’t encountered such an issue. On the top of my head, such an issue might be related to caching, third party plugins, the PHP memory limit of your website or something else.

You could probably try #1 here if you would like: https://docs.generatepress.com/article/debugging-tips/

It would be good to take a backup of your website before doing so.

Hope this clarifies. 🙂

[Jeffrey]

Thanks for the suggestions, Fernando. I wasn’t able to find a solution, though I downloaded Simple CSS and any code updates in there aren’t having issues.

Thanks for the help!

[Fernando]

You’re welcome Jeffrey! Feel free to reach out anytime you’ll need assistance with anything else. 🙂

[Author]

Posts