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.

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!

Shares

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!

17 Comments

  1. Robert Mawson

    Thanks Ania, awesome as ever

    Reply
  2. Afzaal

    how to add the CSS for active link?

    Reply
    • Ania RomaÅ„ska

      Using a new selector with a CSS class of current-menu-item added to a li element (see my reply below).

      Reply
  3. Firmin

    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

      Can you share your URL?

      Reply
  4. info@nomid.com

    Hi Ania,

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

    Thanks, Paul

    Reply
    • Ania RomaÅ„ska

      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
  5. Pete

    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
  6. Andreas

    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

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

    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

      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

        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

        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 😉

  8. Diana

    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

      Thank you, Diana! I’m very happy to hear it was helpful 🙂

      Reply
  9. Hurri

    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

Leave a Reply to Ania Romańska Cancel reply

Your email address will not be published. Required fields are marked *

Enjoing our content?

You might find this interesting…

License Details

REGULAR LICENSE

Single Site

A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

EXTENDED LICENSE

Unlimited Sites

An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.

SUPPORT & UPDATES

Each license is a one-time payment. There are no annual fees. You get lifetime access to product updates. Support is provided for 6 months from the date of purchase.

Server Requirements

SERVER SETTINGS:

  • PHP 7.2 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)

PHP.INI SETTINGS:

  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module

PHP MODULES:

  • allow_url_fopen

Would you like to...

Consult Ania and fellow students?

Join the conversation inside our private FB group.

Would you like to...

Get support privately?

Submit a support ticket via your account page.

Ask Ania?

Submit a question for the next live Q&A session.

Consult fellow students?

Join the conversation inside our private FB group.