Customizing Menu Screen in Mood theme

  • Unknown's avatar
    graceroadfoundation · Member ·

    Hello,
    I want to know if there is a code to change my menu screen for the mobile version screen. The color of the “menu” is grey, but I want it to be white, and I want the rest of the font colors to be white as well, but it’s khaki green. Finally, I want to have my menu background screen to be another color instead of the bright pink salmon color.

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

  • staff-jeanpierreac · Staff ·

    Hi!

    Let’s try.

    The color of the “menu” is grey, but I want it to be white,

    MENU text and those three lines are inside a button tag so…

    button {
    color: white;
}

    I want the rest of the font colors to be white as well, but it’s khaki green.

    Yes, this khaki doesn’t fit with the background :) Those are links in a second level of unnumbered lists -ul tags- (this is the structure inside your .main-navigation menu)

    .main-navigation ul ul a {
    color: white;
}

    Finally, I want to have my menu background screen to be another color instead of the bright pink salmon color

    To do that you can use the following as selector and background property in which parameter rgb(0,255,0) defines the color. This rgb notation defines a color from the quantity of red, green and blue in it. If you need a little bit of help to choose your color, you can use this table: http://www.rapidtables.com/web/color/RGB_Color.htm or if you don’t need to be so specific, you can always try values as ‘red’, ‘blue’ or ‘aquamarine’ as in the previous pieces of code.

    .main-navigation.toggled .nav-menu {
    background-color: rgb(0, 255, 0);
}

    By the way. Just in case you would like to adapt your menu header ( ‘MENU’ + three lines) background, you could use .menu-toggle selector.

    .menu-toggle {
    background-color: rgb(255,0,0);
}

    I hope this helps! :)

  • Unknown's avatar
    graceroadfoundation · Member ·

    Wow, thank you very much!
    But now that I looked at the mobile version more clearly, it seems like when the menu screen is opened, it overlaps with the front page content. Is there a way to fix this also?

  • staff-jeanpierreac · Staff ·

    Hi.

    Yes, it seems your menu overlap the title. To avoid to have a so long menu, we could make menu dots and menu texts to be in the same line. Menu presentation will be shorter and, in my opinion, more elegant. Could you try this css code?

    .main-navigation a {
    display: inline;
}

    Make me know if this solution fits your needs or not. If you prefer to keep your dots and texts in different lines, there are some other options. :)

  • Unknown's avatar
    graceroadfoundation · Member ·

    The css code didn’t fit so well with what I wanted, but thanks for your help!

  • staff-jeanpierreac · Staff ·

    Hi!

    I have just take a look to your blog and it seems it’s ok right now, isn’t it? Do you have any other question? :)

  • The topic ‘Customizing Menu Screen in Mood theme’ is closed to new replies.