Change menu color in mobile view

You can use this:

@media all and (max-width: 767px) {
    .main-navigation a {
        color: #009BFF;
    }
}

Change the color code as needed. You can find the code for the colors at https://colorpicker.com/

The @media query line tell the browser to only apply that when the view is below 767px (which is when the mobile layout kicks in for your theme).

Hi TEchievous,
In the @media all and (max-width: 767px), there is nothing that points to color. SO I added your suggestion but nothing changed!!! I still get the grey invisible color #636363. I searched the whole css and found only 2 places having this #636363 and changed them and nothing changed too. Any other suggestions? Thanks

If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin https://www.ads-software.com/plugins/custom-css-manager-plugin

Then use its “CSS Code” section of the dashboard to hold your CSS modifications.

Alternatively use your Child Theme style.css file to hold your CSS modifications.

In the @media all and (max-width: 767px), there is nothing that points to color. SO I added your suggestion but nothing changed!!! I still get the grey invisible color #636363. I searched the whole css and found only 2 places having this #636363 and changed them and nothing changed too. Any other suggestions? Thanks

My code does work when applied properly. See screenshot here: https://i.imgur.com/MFnUOxg.png (I changed the color to red so it’d be easier to notice).

It’s not working because you’re trying to change the parent’s style.css. You’re not supposed to mess with the parent’s style.css file. You’re supposed to be using child CSS or custom CSS.

how do i know if I’m using a child theme or not? I just go to appearance-editor-stylesheet. I’m new to this.

Thank you very much Andrew and Techievous. I’ve installed the Custom CSS manager and added
`@media all and (max-width: 767px) {
.main-navigation a {
color: #009BFF;
}
}
It works!!

I couldn’t find a custom css manager that works with 4.2.1 with the exception of a package named “Custom CSS” from HTML5andBeyond. However, adding the above code to the “Custom Whole Site CSS” box showed up in view-source, but didn’t seem to override the theme css.

Opening the theme’s style.css and commenting out the second #636363 resolved it.

FWTW.