Adding menu effects can create a really nice point of difference on your website. Effects can be added to the active state or to the hover state. They can even be added to selected tabs instead of all of the tabs on your Divi menu. The addition of effects on tabs is performed using custom style sheeting or CSS.
Geno Quiroz is an advocate for the Divi menu and has some great menu style ideas. We have added a few snippets of code for these in the toggles below.
We will add more as we find them and use them in sites moving forward.
This code below from the tutorial is the code for a line underneath the menu items that changes colour on hover and active state. Add this to your Divi CSS area:
Menu Style 1 – Underline
This tutorial shows 3 different options including the underline shown here.
Menu Style 1 - Underline Code
/** LINE UNDER MENU ITEMS **/
#top-menu .current-menu-item a::before,#top-menu .current_page_item a::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0;}#top-menu li a:before { content: ""; position: absolute; z-index: -2; left: 0; right: 100%; bottom: 50%; background: #15bf86; /*** COLOR OF THE LINE ***/ height: 3px; /*** THICKNESS OF THE LINE ***/ -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}#top-menu li a:hover { opacity: 1 !important;}#top-menu li a:hover:before { right: 0;}#top-menu li li a:before { bottom: 10%;}
Menu Style 2 - Blocks Code
/* ----------------------------------- *//* Menu - Active Item Background Color *//* by Geno Quiroz *//* ----------------------------------- */@media only screen and (min-width : 981px) {/* remove carrot from menu with drop down */ #top-menu .menu-item-has-children > a:first-child, #et-secondary-nav .menu-item-has-children > a:first-child {padding-right: 0px;} #top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after {display:none;}/* menu padding */ #et-top-navigation { padding-top: 0px!important; font-weight:100;} #top-menu li { margin-left: -3px; padding-right: 0px;} #top-menu li > a { padding: 33px 30px 33px 30px!important;}/* remove color fade in on menu text */ #top-menu a { color: #000;}/* current menu item colors */ #top-menu li.current-menu-item { background-color: #0065cb;} /*change background color here*/ #top-menu li.current-menu-item > a { color:#fff!important;}/* menu item hover colors */ #top-menu li:hover { background-color: #0065cb;} /*change background color here*/ #top-menu li > a:hover { color: #fff; opacity: 1!important;} /* current menu ancestor background color */ .current-menu-ancestor { background-color: #0065cb;} /*change background color here*/ .current-menu-ancestor a { color: #fff!important;}/* sub menu adjustments */ .sub-menu { padding: 0px!important;} #top-menu li li a { padding: 19px 5px 19px 8px!important;} .current-menu-ancestor .sub-menu a { color: #000!important;} .current-menu-ancestor .sub-menu a:hover { color: #fff!important;}} }
Adding menu effects on the following sites created impact:
More options for adding extras to menus
Creating verticle menus that you can add anywhere on your Divi website
How to make the Divi mobile menu scroll correctly through the whole window
Adding favicons and icons to Divi menu tabs to add visual impact and engagement
Changing the colour of one item in a dropdown menu
Adjusting the display design and placement of a dropdown menu