Plugins

DiviMenus

DiviMenus - $49

A powerful menu builder that brings the coolest designs and popups to Divi!

Floating DiviMenus

Floating - $9

Choose the Pages and the Location to float your DiviMenus!

Sharing DiviMenus

Sharing - $9

A DiviMenus add-on that brings the coolest Social Sharing buttons to Divi!

DiviMenus On Media

On Media - $9

Display DiviMenus on Images & Videos to add stunning Media options!

DiviSignatures

DiviSignatures - $19

Design Email Signatures with Divi and paste them into your Mail Settings!

DiviPasswords

DiviPasswords - $9

Password Protect sections, rows, columns and modules with Divi!

DonDivi

Layouts

Check these awesome layouts out. Already a DonDivi user? Download them from your account area!

Extra Tools

DonDivi plugins also include Exclusive Extra Tools to help you. Save money and forget additional plugins!

DonDivi

About us

We create premium tools for improving your creativity and simplifying the way to design stunning websites.

Special Bundle!

DiviMenus & Family

DiviMenus & Family - $69

This stunning Bundle includes the DiviMenus module and its 3 new Add-ons:
Floating + Sharing + On Media.

Members

Log in

Access your downloads, layouts and support. If you have purchased at Elegant Themes > Register.

Documentation

Access all the detailed information about our plugins and get the most out of them!

FAQ & Support

Already a DonDivi user? Send us a ticket from your user area and we will reply as soon as possible.

Contact us

Applying Underline Hover Effect to DiviMenus

Underline your Menu Items on Hover!

From the DiviMenus module, you can easily underline your Menu Items on hover by adding a Border-Bottom to them as we show you in this VIDEO.

However in this tutorial we will explain how to apply an Animated Underline Effect to your Menu Items using CSS.

Let’s go!

In this example, we are using a DiviMenus Flex module with 2 Menu Items. We have chosen TEXT as “Content” and also enabled “Show icon” to show the emojis next to the Titles 😉. By enabling hover options (click the phone icon next to the field title), you can also choose an alternate emoji that will be revealed when hovering over the Menu Item.

👉 Once your DiviMenu is ready…

Paste this into DiviMenus → Advanced → CSS Class:
dd-underline-effect

By assigning this class only to the modules you want to modify, you will prevent these styles from being applied to other modules on the same page.

Paste this into Divi → Theme Options → Custom CSS:
.dd-underline-effect .dd-mi:before {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    width: 0;
    height: 3px;
    margin: auto;
    background-color: #f9489b;
    -webkit-transition: .5s ease;
    transition: .5s ease;
}

.dd-underline-effect .dd-mi.active:before, .dd-underline-effect .dd-mi:hover:before {
    width: 100%;
}

Change the height and background-color to your liking!

🥳 That’s it!

👉 Subscribe to our YouTube channel

More Videos