Responsive menu font colors

cullenmackey · December 2016

Hello. I can't figure out how to change the font color in the responsive (mobile) menu. I would like the active menu item to be a white font color (since the background color is currently red), but the rest of the menu items to be a black font (since the background color is currently white). Is there a setting for this? If not, could you send me the css that would make this possible?

Much appreciated,

Cullen

Albert · January 2017

Hi,

please send us link to page/s where you would like to do above changes first so we can have a look on it and give you best possible solution.

Thanks!

cullenmackey · January 2017

Here you go. Thank you for your assistance:

http://www.giantshapesweb.com/snelson2

(password: pipeline)

Albert · January 2017

Ok, thanks. So to make change font color of menu items on mobile, you need to use the following css:

@media only screen and (max-width: 1239px) {
    #Top_bar #menu ul li:not(.current-menu-item) a span { color: #000; }
}

cullenmackey · January 2017

Thank you! That worked. But there is still one problem. The active menu item now turns to a black font also. How do you keep the active item white (whenever the background color is red)?

Albert · January 2017

To change hover color as well, you need to use the following css:

@media only screen and (max-width: 1239px) {
    #Top_bar #menu ul li:hover a span { color: #E2E2E2 !important; }
}

cullenmackey · January 2017

Thanks again for your help, but it wasn't the hover color that was needed. You can see that there are parts of the responsive menu that have a red background and black font color. We would like the font color to be white when against a red background, rather than black. But the white background parts of the menu should continue to have a black font as is the case right now. Can you send the css to change the font color from black to white when against a red background? Thank you.

Albert · January 2017

Sorry but we do not understand. We see part with a red background but it's active menu item. So do you mean to change color of menu item when it's active?

cullenmackey · January 2017

Yes, correct. We do not want black font color against a red background. Whenever the background is red, the font color should be white.

Albert · January 2017

Ok, so to change text color of active menu item, please use:

#Top_bar .menu > li.current-menu-item a { color: #FFF !important; }

Responsive menu font colors

Comments