Add Animated Divi Menu Underline on Hover

By Mr. Dif | July 25, 2018 |
divi-logo

You can easily add an animated divi menu underline beneath each menu in the Divi theme from Elegant Themes with a little custom css added to your WordPress site running the Divi theme. This menu underline effect grows from the center and shows on the desktop menu only.

divi menu hover effect

This css style is using the default settings for header format. If you’ve just installed Divi you don’t need to configure this setting, it should be set to this automatically.

divi default header style

Add the following code to your child stylesheet OR to Divi theme options > general > custom CSS box:



#top-menu > li > a:hover {
color: #01498a !important;
}

#top-menu-nav > ul > li > a {
display: inline-block;
position: relative;
padding-bottom: 0px;
}

#et-info-email:hover, #et-secondary-menu>ul>li>a:hover, #top-menu-nav>ul>li>a:hover, .et-social-icons a:hover {
opacity: .7;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

#top-menu-nav > ul > li > a:hover:after {
background-color: #01498a !important;
}

#top-menu-nav > ul > li > a:hover:after {
width: 100%;
background: #01498a;
}

#top-menu-nav > ul > li > a:after {
content: '';
display: block;
margin: auto;
margin-top: 9px;
height: 4px;
width: 0px;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}





Note that Elegant Themes also has a tutorial to add CSS Hover Effects to Divi menus. The difference here is that the above code does not add the current menu item css style and also this effect for a divi menu underline grows from the center as opposed to starting from left to right.

Posted in WordPress and tagged ,

7 Comments

  1. Tom on April 5, 2019 at 11:45 pm

    Hi,

    This effect is really nice, however, it pushes the menu links up out of centre-alignment to make room for the hover line.

    How do I make it so the menu stays exactly where it is?

    Thanks!

    Reply
    • Mr. Dif on April 6, 2019 at 10:36 am

      Thanks Tom! You could try adding padding-top to .et_header_style_left #et-top-navigation.

      Reply
      • Tom on April 8, 2019 at 9:50 am

        Hey,

        Thanks for the reply!

        Forgive my CSS illiteracy, but I have no idea how to do what you suggested.

        Do I have to edit something or add something?

        Any help is much appreciated.

        Thanks again!

        Reply
        • Mr. Dif on April 8, 2019 at 10:31 am

          Sure thing. Add this additionally to your child stylesheet or to Divi theme options > general > custom CSS box:

          .et_header_style_left #et-top-navigation {padding-top: 10px;} and adjust the 10px amount as needed.

          Reply
          • Tom on April 9, 2019 at 8:12 am

            Amazing! Thanks a lot!



  2. Jade on October 13, 2020 at 10:16 pm

    This pushed the menu up, but leaves the arrows down for the drop down.

    How would you adjust this? I tried the above but it didn’t work.

    Reply
    • Mr. Dif on October 20, 2020 at 5:16 pm

      Hi Jade, you’re right. I haven’t looked at this for the use case of a drop-down menu. The Divi menu uses a pseudo class for the little drop-down arrows. Specifically :after. Because they use it on the a link it’s the same as the code above and it conflicts. One solution might be to set up the effect on the list item #top-menu > li:hover instead of the #top-menu > li > a:hover for instance.

      Reply

Leave a Comment