Add an effect to the hover and active state on your Divi menu can be done with CSS.

Geno Quiroz has some great menu style ideas.

We will add more as we find them.

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

Geno Quiroz has some great tutorials such as this one on blocked menus.

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;}

}

    

}

We used a menu effect on the following sites:

Obelisk Industrial 
5th Green

Looking to get your business seen? Then see us.

Web Site Developer Auckland | North Shore | Matakana | Warkworth | Omaha

Call 021 158 1400 for Web Design North Shore, Auckland

Share This