Code Snippet

Header

Divi Version: 2.4+

  • Difficulty

Creating an Underline Menu in Divi (hover effect)

An underline menu hover effect like in Extra Theme now available for Divi too.
All you have to do is to put this code to Theme Options > Custom CSS or in the Style.css file of your child theme. Also you can change the underline color (background: #404040; /* Change your color here */).
#top-menu .current-menu-item a::before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1.0;
}

#top-menu li a:hover:before {
-webkit-transform: translateY(18px);
transform: translateY(18px);
opacity: 1;
}

#top-menu li a:before {
content: '';
position: absolute;
top: 10px;
left: 0;
background: #404040; /* Change your color here */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}