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
Access this layout and dozens of other freebies - available exclusively for newsletter subscribers.
New here?
Join the newsletter to unlock the Freebie Library and get weekly Divi tips, tutorials, and design goodies.
Already subscribed?
Go straight to the Freebie Library and download this layout - plus lots more!
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!
HI Anya, i use this code, copied from your site and comment, but no way to have active link underlined., could you help me to understand why?
:root {
–BottomOffset: 22px;
–LineHeight: 5px;
–LineColor: white;
}
/* 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,
.dl-menu-style1 ul.et-menu>li.current-menu-item>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);
}
You should add the target with the
currrent-menu-item
class to the selector that targets the hover state, as shown on this screenshot.Thank’s a lot, it work
Hey Ania… Great bit of code. Thanks!
Is there a way to exclude a particular menu item? My menu has a link styled as a button that I would rather not have this effect on.
Hi Dorian! Sure, you’d just need to modify the selectors to exclude your custom CSS class with the
:not(.BookSession)
selector. Here’s a screenshot for your reference.Awesome! That did it… Thanks!
Hello,
I can’t seem to get the hover effect to work. I named the CSS class – dl-menu-style1 in my menu settings
Add this code into the main menu element – /* Change these values to edit line appearance and position */
:root {
-BottomOffset: 20px;
-LineHeight: 5px;
-LineColor: #f42179;
}
and add the /* Menu Hover Effects Style 1 */ CSS into the theme options CSS.
I kinda got the code to work once but the hover effect was wonky.
Thanks Ania, awesome as ever
how to add the CSS for active link?
Using a new selector with a CSS class of current-menu-item added to a li element (see my reply below).
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.