How can I change the mobile menu colors?

  • Author
    Posts
  • #154897

    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)

    #154934
    jamphotographynz
    Member
    Original poster

    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!

    #154964
    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

    #154968
    jamphotographynz
    Member
    Original poster

    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.

    :)

    #154989
    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

    #154994
    jamphotographynz
    Member
    Original poster

    That works, thank you so much!!!!

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