change menu color

  • Hello,
    First of all, congrats for the theme. I have one question:

    How is possible to change the color of the menu? (the one that appears just below the header)
    I remember before I was able to do that, but now is not working for me…

    Right now, the menu has white backgroud color, so it′s not seen (just when you scroll over it). I would like to change the default colour of my menu. https://viajarataiwan.es

    Any idea? Thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Add something like this to your Custom CSS plugin, or a Child Theme style.css file.

    #nav-header .container,
#nav-header .nav ul {
    background: #f00;
}

    Hope this helps.

    • This reply was modified 8 years, 3 months ago by ThemeSumo.
    Thread Starter allormo

    (@allormo)

    Perfect, it worked! And one more question… if I also want to apply the same color to the sub-menu? I mean, the one that you can see when you move the mouse over the main one?
    (for example, on my site, now i can see it on green, but the sub-menu still on white…)
    thanks again!

    Change the code I gave you to this instead.

    #nav-header .container {
    background: #08a309;
}
@media only screen and (min-width: 720px) {
    #nav-header .nav ul {
        background: #08a309 !important;
    }
}
@media only screen and (max-width:719px) {
    #nav-header.nav-container {
        background: #08a309;
    }
}

    This will change the color of the dropdown menu, and the mobile menu bar to match.

    Hope this helps.

    • This reply was modified 8 years, 3 months ago by ThemeSumo. Reason: error
    Thread Starter allormo

    (@allormo)

    Hello @thesumo, thanks for the tip.
    But still not working… Background color of submenu is still white, and I am not longer able to see the text on the boxes :/

    Hello @allormo, I trust all is well!

    Please try the following CSS code

    .sub-menu { 
 background: #08a309;
}

    If it will not work, add the !important rule, like this:

    .sub-menu { 
 background: #08a309 !important;
}

    Please note, The !important rule overrides that particular property. So in the future, if you will require modifying this property again, you must edit the code above.

    Hope this helps!

    Cheers,
    Nastia

    Thread Starter allormo

    (@allormo)

    Now adding that last CSS code to the previous one from @Thesumo worked perfectly.
    Many thanks for both of you ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘change menu color’ is closed to new replies.