How can I change the mobile menu colors?

  • Hi Ben

    How can I use CSS to change the colors of my mobile menu?

    I’d like to change:

    1. The dropdown menu on the main page: it is currently a black box with white text. I like the white text but I want the box to be navy to match my website.

    2. When I click the menu link button, it goes to a full page menu. The full page background color is black and the text saying ‘menu’ is red. I want the BG color to be navy and the text to be white.

    Thanks heaps!

    The blog I need help with is: (visible only to logged in users)

  • I’ve successfully changed the main menu navigation button color for mobile with this CSS:

    screen and (max-width: 1000px){
    .menu-toggle {
    background-color: #172332 !important;
    .main-navigation ul {
    background: #a70000;

    I’m still looking for CSS to change the mobile menu colors once I’ve clicked into the mobile menu that takes over the mobile screen.

    Currently, when I click into the mobile menu the text for ‘menu’ is red – I want it to be white.

    The full page background for the mobile menu is black – I want it to be navy.

    Thanks heaps!

  • Hi there.

    You can change the mobile menu background color with:

    @media only screen and (max-width: 690px){
    .masthead .menu-wrap {
    background: #f00;

    Does that do what you want?

    Thanks – Ben

  • Yep!! Thank you! That worked for the background.

    On the same menu that takes over the mobile screen, how do I change the color of the word ‘menu’? It’s currently set to red and I want to make it white.


  • I think the following is what you need:

    @media only screen and (max-width: 690px) {
    .masthead .menu-toggle {
    color: #ffffff;


  • That works, thank you so much!!!!

  • The topic ‘How can I change the mobile menu colors?’ is closed to new replies.