How can I change the hover color in the navigation element?

I've been able to change the colors in the navigation drop down menu under "Yodelers" but I can't find the way to change the hover color in the navigation bar itself. I want it to be the same blue (#52a6e1) as the drop down menu. Can you please point me in the right direction?

  • Terry
    • Site Builder, Child of Zeus

    Hey Nastia,
    Well, I got everything confused because I tried to mess with the CSS for the sub menu before and should not have done that. Although that did work but then I couldn't change the main menu.

    (Note to self, "Don't mess with the CSS if you only kind of know what you are doing.")

    So I deleted that navigation menu and started over. Now, I got the main menu to look like I want based on your instructions (I decided to change the hover color to white). (The screen cast was a bonus! Very helpful!) But I can't figure out how to change the sub menu under "Yodelers". I made a unique preset for the navigation by the way.

    The image attached shows the main menu as I want, the hover being white with red font. Now, the dilemma is, how do I get the drop down to be the same?

    Thanks for all of your help!

  • Nastia
    • Support Rock Star

    Hello Terry, I trust this message finds you well!

    At the current time the submenu color can only be changed in preset custom css.

    Go to menu's Settings > Appearance tab, create new preset and click on Edit Preset CSS. You can use the CSS code bellow to change the background color of submenu:

    /*Submenu Hover */
    [data-style='horizontal'] ul.sub-menu > > a, div[data-style='vertical'] ul.sub-menu > > a {
    /*Font color */
    /*SubMenu Background*/
    [data-style='horizontal'] ul.sub-menu > > a, div[data-style='vertical'] ul.sub-menu > > a{

    I hope this helps!


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.