By default Avada theme doesn’t have any option to chose any background color for hover for main menu but its available only for Sub-Menu Items. In this tutorial I’ll provide you with the CSS solution on how you can add a hover with background colors in ‘Avada’ Theme.

There are 5 Header versions available in Avada and each one have different layouts. I am going to target the Header Version #1 for the Menu Item but the solution will work on all header versions including the Side Header Position. Below Image is an example result of background color being added to the header version #1.


Avada Menu Hover

As you can see in the above image, a nice hover background-color is added for the Main Menu. Below is the CSS that is being used for the Above Hover effect. You can add this piece of CSS into your Theme Options -> Custom CSS section.


Copy to Clipboard

The CSS above can definitely be adjusted, you can change the text color, background color, increase OR decrease the padding as per your need OR more CSS properties can be added but the above CSS is just the basic CSS you’ll need to get the hover working for Avada Theme.

Note: For the Sub-menu items hover background-color, you can already control it from Theme Options –> Styling –> Main Menu Color section.

And replace the word main with secondary of the above given CSS if you want to target the secondary menu of Avada Theme.