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!