How can I change the mobile menu colors?

  • jamphotographynz · Member ·

    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)

  • jamphotographynz · Member ·

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


    @media     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!

  • binarymoon · Theme Author ·

    Hi there.

    You can change the mobile menu background color with:

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

    Does that do what you want?

    Thanks – Ben

  • jamphotographynz · Member ·

    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.

    :)

  • binarymoon · Theme Author ·

    I think the following is what you need:

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

    Ben

  • jamphotographynz · Member ·

    That works, thank you so much!!!!

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