Ready-to-use CSS snippets for your Divi Menu module!
The Divi Menu module doesn’t have hover styles apart from a basic link color change. In this simple tutorial, you’ll find a list of seven different hover effects with animated underline. We made it super easy to customize with CSS variables, so that you can change the line color, the height and offset to make sure the fun effects work perfectly with your Menu module and match the rest of your website design style.
Free Resources for Divi Lovers
Join our newsletter to get the good stuff!
We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.
Sign up to download
Get access to this layout and all the free resources made exclusively for our subscribers!
Already subscribed?
Fill the signup form and if you’re on the list it’ll get you straight to the download page!
Can’t see the form? Click here
The problem with ready-made CSS snippets is that the results you get don’t always look the same as what the promised outcome was. The difference in outcomes usually depends on your Menu module sizing. But it won’t happen here! These code snippets include three variables that will help you adjust the effect to match your Menu module perfectly. Watch the video below to see how we’ve approached this and how you can use the code to create the perfect menu underline for your website.
Step 1
Set up your variables
The first part of the CSS code we prepared includes CSS Variables, which you can edit to achieve your desired look. You can change the line height, the color, and define the line bottom offset – to make sure it is displayed in the correct place, no matter if your Menu module is using a logo and how big it is.
This is the CSS code that you need to copy first:
/* Change these values to edit line appearance and position */
:root {
--BottomOffset: 20px;
--LineHeight: 5px;
--LineColor: #29EECC;
}Step 2
Choose your hover effect
The second part of the CSS code defines the underline animation. Copy and paste one of the code snippets below and add the corresponding CSS class to your Menu module settings.
Style #1
Use the CSS class dl-menu-style1
/* Menu Hover Effects Style 1 */
.dl-menu-style1 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style1 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
width: 0;
height: var(--LineHeight);
bottom: var(--BottomOffset);
border-radius:var(--LineHeight);
left: 50%;
transition: 0.4s cubic-bezier(0.25, 0.1, 0, 2.02);
}
.dl-menu-style1 ul.et-menu>li>a:hover:before {
width: calc(100% + var(--LineHeight));
left: calc(var(--LineHeight) / -2);
}Style #2
Use the CSS class dl-menu-style2
/* Menu Hover Effects Style 2 */
.dl-menu-style2 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style2 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
width: 0;
height: var(--LineHeight);
bottom: var(--BottomOffset);
left: calc(var(--LineHeight) / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
transform: skew(-10deg);
}
.dl-menu-style2 ul.et-menu>li>a:hover:before {
width: calc(100% + var(--LineHeight));
}
Style #3
Use the CSS class dl-menu-style3
/* Menu Hover Effects Style 3 */
.dl-menu-style3 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style3 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
width: 0;
height: var(--LineHeight);
bottom: var(--BottomOffset);
right: calc(var(--LineHeight) / -2);
transition: 0.3s cubic-bezier(.03,.3,.4,.96);
}
.dl-menu-style3 ul.et-menu>li>a:hover:before {
width: calc(100% + var(--LineHeight));
}Style #4
Use the CSS class dl-menu-style4
/* Menu Hover Effects Style 4 */
.dl-menu-style4 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style4 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
opacity:0;
height: var(--LineHeight);
bottom: calc(var(--BottomOffset) + 12px);
width: calc(100% + (var(--LineHeight) / 2));
right: calc(var(--LineHeight) / -4);
transition: 0.4s cubic-bezier(0,.54,.52,.76);
border-radius: 2px;
}
.dl-menu-style4 ul.et-menu>li>a:hover:before {
bottom: var(--BottomOffset);
opacity: 1;
}Style #5
Use the CSS class dl-menu-style5
/* Menu Hover Effects Style 5 */
.dl-menu-style5 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style5 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
opacity: 0;
height: var(--LineHeight);
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (var(--LineHeight) / 1.5));
right: calc(var(--LineHeight) / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
border-radius: var(--LineHeight);
}
.dl-menu-style5 ul.et-menu>li>a:hover:before {
bottom: var(--BottomOffset);
opacity: 1;
}Style #6
Use the CSS class dl-menu-style6
.dl-menu-style6 ul.et-menu>li>a {
position: relative;
z-index:1;
}
.dl-menu-style6 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
opacity: 0;
height: var(--LineHeight);
bottom: calc(var(--BottomOffset) - 10px);
width: calc(100% + (var(--LineHeight) / 1.5));
right: calc(var(--LineHeight) / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: rotate(45deg);
transform-origin: left;
}
.dl-menu-style6 ul.et-menu>li>a:hover:before {
bottom: var(--BottomOffset);
opacity: 1;
transform: rotate(0);
}Style #7
Use the CSS class dl-menu-style7
/* Menu Hover Effects Style 7 */
.dl-menu-style7 ul.et-menu>li>a {
position: relative;
z-index: 1;
}
.dl-menu-style7 ul.et-menu>li>a:before {
position: absolute;
content: '';
display: block;
z-index: -1;
background: var(--LineColor);
opacity:0;
height: var(--LineHeight);
bottom: var(--BottomOffset);
width: calc(100% + (var(--LineHeight) / 1.5));
right:calc(var(--LineHeight) / -3);
transition: 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940);
transform: rotateY(25deg) rotateX(35deg) translate(20px, -20px) skew(-35deg, 10deg);
border-radius:2px;
transform-origin: right;
}
.dl-menu-style7 ul.et-menu>li>a:hover:before {
opacity:1;
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
}That’s it!
Enjoy your fun animated menu!
Feel free to copy and paste these CSS snippets (make sure to include your CSS variables from step #1). To make this super-easy and fun to use, we prepared a simple page layout which lists all these animations. It’s free to download for our subscribers and you can use it to quickly preview how each underline effect will look with your own colors, line height and offset!
And if you’d like to gain a better understanding of how CSS works with Divi, you can check out The Beginner Guide to Working with Custom CSS in Divi.Â
Have fun creating beautiful and fuss-free effects in a matter of minutes! And if you’d like to learn how to write the CSS for this type of effect yourself, here is our tutorial with a step-by-step walkthrough: How to Add Underline Hover Effect to Divi Menu with CSS.
Did you enjoy this tutorial? Tell us in the comments!
Thanks for this awesome css !
Using the style1, I reduced the bottom bar width by 50% but I can’t find how to center it. It’s still on the left.
Can you help me ?
Can you share your URL?
Hi Ania,
How can I keep the hover effect on the active links?
Thanks, Paul
Hi Paul!
You’d need to edit the CSS code a little bit. Every time there is a :hover state inside the selector, for example in
.dl-menu-style6 ul.et-menu>li>a:hover:before {you’d need to add a secend selector with the current-menu-item class, like this:Hopefully, this helps.
Hello Ania
Are the same hover effects available in your DiviToolbox addon?
If not is it possible to add them to the addon?
Thanks.
Pete
Hi Ania
I have added the CSS Class to my Menu Module settings.
As I am working in the Divi theme builder, I then added your CSS code into the Header Template Settings > Advanced Tab > Custom CSS The code works but throws up a lot of errors.
Specifically, in the CSS Code (That we need to copy first) it is looking for a RBRACE after each variable.
Then in the main body of code it warns of unexpected inputs.
Hope you can help
Hi Andreas, the syntax error checker in Divi is not perfect, it doesn’t recognize all CSS features correctly, but you can be sure that the code is correct – the error messages are false 🤓
Hello,
Thanks for sharing tips.
I tried as described above.
BUT It does not work at all.
I don’t know what I did it wrong.
Please see attached showing what I did.
https://bit.ly/3qJcsYv
The CSS class needs to go to the Menu Module settings – Advanced tab (in the Divi Builder). Sorry I didn’t make it clearer.
Thank you for the answer.
By the way, I see many CSS errors.
https://prnt.sc/26gmqp8
I am not good at css coding.
Can you please write the codes without error?
Thanks.
This CSS code can’t be placed in the Module settings. It can go inside Page settings, Theme Options, or child theme stylesheet (you had it correct the first time, in the Module settings you only need to add the CSS class). The code is correct, trust me 😉
Thank you Ania! It took a little tweaking to make it work right for my site, but I love it! I like to test out all the awesome things you show us how to do for use on my client sites.
Blessed to be on your email list!
Thank you, Diana! I’m very happy to hear it was helpful 🙂
Thanks Ania!
This is great and as always I’m very grateful for your tutorials and freebies! I always get excited when I see a Divi Lover email landing in my inbox.