How to change wordpress mobile menu color?


I own this blog : transactionbourse dot com, with a theme from mythemeshop.

The top menu is white on desktop, with grey font. On mobile, the menu is white too, but the font is white, I don’t know why. So it’s unreadable on mobiles.

So I just want to change the font color on mobile, to contrast with white.

Someone can help me?

I already tried a lot of code found on google, but not working…

Thanks in advance :slightly_smiling_face:

Nobody can help me? :frowning:

The font is unreadable because it is likely set in a media query. I would suggest looking at the mobile site in the browser then inspect the element so you know what CSS element it is set with.

Then you have a couple options.

Write a new media query that over rides the old one in the CSS editor, if the theme creator hasn’t disabled it or that your permissions disallow it. You’ll find it under Appearance. You man need to recreate the entire media query though. I don’t like doing this because it’s always been a bit buggy and one theme update could make you have to start over.

You can download the theme and edit the CSS files directly, however the next update will erase your changes.

I would suggest you create a child theme with your own CSS files. There are plugins that will help you copy the files so you can edit them.

These suggestions are for Wordpress direct install, if you’re using dot com you’ll need to go to their support.

If you need help with how to do do any of that, well, there are some courses you can take on CSS here, or I would suggest you go to and post directly on their forums. This site isn’t for Wordpress questions, this is for the Free Code Camp courses.

its very easy, just use a media query to change colour of fonts when the screen size is 865px or less. The way to do it is:

@media & (max-width: 865px){
/*css styles*/

Now the styles contain

#header .primary-navigation .toggle-mobile-menu{
color: 'your desired color hex code';

now the side menu which opens on toggle has an <a> tag inside <li> elements. You have to style the <a> tag to give it a color. Remember, all this happens inside the media query tags. Always here to respond to your questions if any.

Thank you very much to both of you :slightly_smiling_face:

I already put the provided code :

#header .primary-navigation .toggle-mobile-menu{
color: #555555;

in my additional CSS and now the font is readable! (but it is still white on white when I click on it to unroll the left menu).

Then, when I try to put the first code (with “media”) in the same place, it give me 4 errors (at the “media” line), so I don’t know if I can validate anyway?

Sorry, I have close to 0 knowledge in CSS…

I up this :slightly_smiling_face:

Hey @raskdetreve

You need to add !important like this:

#primary-navigation li, #primary-navigation li a {
    font-family: 'Roboto';
    font-weight: 400;
    font-size: 18px;
    color: #555 !important;
    text-transform: uppercase;

Wonderful, thanks a lot!

You are very welcome…

I have the same challenge.
How do I add this code?
Thats whats currently in the css section:

/* You can add your own CSS here. Click the help icon above to learn more. */
 .widget_sow-features .sow-features-list .sow-features-feature .textwidget {
     margin: -5px 0 5px 10px !important;
 .widget_sow-features .sow-features-feature {
     margin-bottom: 0px !important;

Thanks in advance!