Divi add underline to current menu item (but not to sub-menus)

Written by Sam

On February 24, 2020
menu-hover-underline-divi

This one is very easy… Just add this code under either:

Divi > Theme Options > Custom CSS

or

Appearance > Theme Editor > style.css

#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: #0F4C81; /* Change your color here */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}
.sub-menu .current-menu-item a::before {
display:none;
}
.sub-menu a:hover:before {
display:none;
}
.sub-menu a:before {
display:none;
}

You may also be interested in…

No Results Found

The page you requested could not be found. Try refining your search, or use the navigation above to locate the post.