Copy & Paste Divi Menu Module Hover Effects

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.

Download Sample Layout Live preview

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.

/* 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);
}

/* 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));
}

/* 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));
}

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

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

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

/* 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!

Download Sample Layout Live preview

Have you seen our

Divi child themes?

Divi Toolbox plugin?

We offer a great selection of high-quality Divi products to speed up your work. Feel free to use a coupon code IREADBLOG at the checkout to get a 10% discount!

Divi Lover Shop

18 Comments

mark carranza on 2024-06-21 at 02:25

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.
Reply
Robert Mawson on 2023-12-19 at 14:33

Thanks Ania, awesome as ever
Reply
Afzaal on 2023-11-29 at 12:16

how to add the CSS for active link?
Reply
- Ania Romańska on 2023-11-29 at 12:19
  
  Using a new selector with a CSS class of current-menu-item added to a li element (see my reply below).
  Reply
Firmin on 2023-05-23 at 15:30

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 ?
Reply
- Ania Romańska on 2023-05-24 at 14:04
  
  Can you share your URL?
  Reply
[email protected] on 2023-03-09 at 15:39

Hi Ania,

How can I keep the hover effect on the active links?

Thanks, Paul
Reply
- Ania Romańska on 2023-03-10 at 09:16
  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:
  
  .dl-menu-style6 ul.et-menu>li>a:hover:before, .dl-menu-style6 ul.et-menu>li.current-menu-item>a:before{
  
  Hopefully, this helps.
  Reply
Pete on 2022-12-18 at 09:46

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
Reply
Andreas on 2022-01-21 at 15:18

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
Reply
- Ania Romańska on 2022-01-21 at 18:29
  
  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 🤓
  Reply
daehm on 2022-01-20 at 06:34

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
Reply
- Ania Romańska on 2022-01-20 at 07:09
  
  The CSS class needs to go to the Menu Module settings – Advanced tab (in the Divi Builder). Sorry I didn’t make it clearer.
  Reply
  - daehm on 2022-01-21 at 03:08
    
    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.
  - Ania Romańska on 2022-01-21 at 07:11
    
    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 😉
Diana on 2022-01-14 at 20:34

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!
Reply
- Ania Romańska on 2022-01-17 at 09:28
  
  Thank you, Diana! I’m very happy to hear it was helpful 🙂
  Reply
Hurri on 2022-01-14 at 10:22

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.
Reply