Changing menu background color

  • Author
  • #3045481


    I just changed my website’s template to Booklet.
    I customized my front page with a menu bar that I like very much.

    Thing is, when the mouse goes over this menu, I had to make it dark green in order to keep the title white, since that dark green is set with the “header background color” (and with this tool, the color of the title adjusts automatically)

    I would like to know if there’s a way to change the color that appears when the mouse goes over the menu, especially for the drop-down items (I’d like another color, something like a very light green, while keeping the blog title white).

    I don’t know anything about CSS though…

    The website I need hemp with is
    The menu I’m talking about is the one right below the header image.

    Thank you very much for your help!

    The blog I need help with is


    Hi there, I just picked a random green for this, but you can change it to whatever shade of green you want.

    .main-navigation li ul a:hover, .main-navigation li ul li a:hover {
      background-color: #008822 !important;

    Let me know if you have any problems.



    Thank you for your help.
    Still I can’t get the color to change.

    I already have a bit of CSS in my additional CSS panel, to add the menu title.

    @media only screen and (min-width:800px) {
    .menu-toggle:after {
    content: “Menu”;
    margin-left: 5px;

    So I don’t really know where to put the bit you gave me. If I put it in the same panel, it doesn’t seem to work…


    SO being a total newbie when it comes to CSS, I tried several things and it seems to be working, thank you so much :)


    Hooray and you are welcome!

The topic ‘Changing menu background color’ is closed to new replies.