[Dennis]

Aloha – my mobile menu (three bars) is the same color as background so it is hard to see. Can you help me change the color and also add the word Menu next to it?

[Mahesh]

@mauitheatre:
Hi Dennis,

Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

#responsive-menu-button {
    color: #ff0000;
}
/* For hover color */
 #responsive-menu-button:hover {
    color: #00ff00;
}

Note: Please change the color to your desired hex vaule.

Regards,
Mahesh

[phillycontemporary]

Hi! This code works for me, although after the three bars are clicked, the ‘X’ to minimize the mobile menu is still blue.

The responsive menu color also changes back to blue when the ‘X’ is clicked (although the hover color remains)… Any thoughts?

[Mahesh]

@phillycontemporary: The ‘X’ color will take the same color as that of menu. If you want to change the ‘X’ color independently, add the following CSS

.sidr-main-open #responsive-menu-button {
	color: #ff00ff;
}

Regards,
Mahesh

[phillycontemporary]

Great, Thank you–The code changed the color of the X, however the responsive menu three bar went back to blue when the X was clicked…

[Mahesh]

@phillycontemporary: Its because of :focus pseudo-class. Please add the following CSS:

#responsive-menu-button:focus {
    color: #d40f7d;
}

Regards,
Mahesh

[phillycontemporary]

Thank you! This fixed it! 🙂

[Mahesh]

@phillycontemporary: Thank you for your appreciation. Have a nice day!
Regards,
Mahesh

[Author]

Posts