Color Hamburger Menu when open

Hello again,

I have a question for another X-Theme-Page I am working on.

When I open the Hamburger Menu on the mobile version - If I open the Menu, the Hamburger Icon is turning to white and so its invisible. I already changed the color of the Hamburger Menu + Hover.

How can I change the color of the Hamburger Icon, when the Mobile Menu is opened?

The website is: www.schreinerei-wieser.de

Thanks for help and best greetings
Andy / EIGENARTdigital

Hi Andy,

Thanks for writing in! Could you please try adding the following CSS rule into your X -> Theme Options -> CSS area and see if that helps.

.x-btn-navbar:hover {
    color: #ff0000;
}

Please make sure to purge all cache before testing (refer: https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/).

Hope that helps.

Hey there,

thanks for your reply.

I already did the follwing CSS for the Hamburger Menu:

.x-btn-navbar.collapsed {
background-color: #ffffff;
color: #A3A026;
}

.x-btn-navbar.collapsed:hover {
background-color: #ffffff;
color: #A06626;
}

But when I open the Hamburger Menu on mobile Screen the Icon becomes invisible.
So I want to change the color for Hamburger Icon, when Menu is open.

Thanks for help again :slight_smile:
Greetings Andy / EIGENARTdigital

Hi Andreas,

Since it’s just the same color for all toggle state then you can consolidate it into this single CSS

.x-btn-navbar,
.x-btn-navbar:hover,
.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover
{
background-color: #ffffff;
color: #A3A026;
}

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.