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

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

}

    

}

Pin It on Pinterest

Share This