Background color of Main Menu Items When Hovering and when on Current page

Hi there,

I am hoping someone can help me figure out how to change the background color of the menu items on our website, I have tried using the customizer (see screenshot) as well as multiple variations of CSS and nothing seems to work yet. All I want is for the background to be blue when hovering over each item, as well as the items in the drop down list. and then to have the background stay blue (see example attached) when it is the current page you are on.

I was hoping not to have to ask for help with this, but I just can't seem to figure it out.

Please let me know if you can help me solve this mystery.

Thank You!

– Mark

  • Nastia
    • Support Rock Star

    Hello Mark!

    I hope you are doing well today!

    The suggestion from cotr is working perfectly. Please note, if you use !important it may affect the future changes on your site, because this option is overwrite styling. So, if you decide to change the menu color again, you must to edit this specific CSS code.

    You can add this code you CSS Editor of your theme or you can try the Simple Custom CSS plugin.

    Thank you cotr for chipping in :slight_smile:

    I hope this helps!



  • M Hipsh
    • Site Builder, Child of Zeus

    This is perfect.

    Here’s what I ended up going with (2nd line is for the dropdown secondary menu):

    #mega_main_menu_ul>li>a:hover {background:#3192d2 !important;}

    #mega_main_menu_ul>li>ul.mega_dropdown>li a:hover {background:#3192d2 !important;}

    Thank You both for your help!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.