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.
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.
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.
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!
Thanks Tom! You could try adding padding-top to .et_header_style_left #et-top-navigation.
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!
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.
Amazing! Thanks a lot!
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.
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.