Change Avada menu button color in Top Nav – Avada Theme and Other Tips & Tricks

An Avada website client wanted to have a couple of buttons in their Top Nav with matching dropdown menus. Out of the box, Avada doesn’t have an option for per item menu colors like that. But with a little CSS, this is acheivable.

When viewing the page source, you can find the unique menu item ID for the parent item/button like shown here:

http://prntscr.com/snka3f

You can then add this CSS below to control the text/bg colors. Just correct ALL instances of the menu item in below CSS as below CSS is just for one of the parent menu items. You can duplicate the below CSS as many times as you need for other items. You can add it to your WP Dashboard → Avada → Theme Options → Custom CSS area.

.menu-item-11370 .fusion-button {
    background: #2a68b0!important;
    color: #ffffff!important;
}

.menu-item-11370 .sub-menu,
.menu-item-11370 .sub-menu li,
.menu-item-11370 .sub-menu a {
    background: #2a68b0!important;
    color: #ffffff!important;
    border-color: #2a68b0!important;
}

To get color-hex codes for your css styles, you can use the site below:
http://www.colorpicker.com/

Hope that helps 🙂

Leave a Comment Cancel Reply