Add a line under the menu

About Me

Projects

Official WPML Contractor

Blog

Get in Touch

Testimonials

Sitemap
Search …
Divi Theme Code Snippets How to add a colored line under Divi Main Navigation
How to add a colored line under Divi Main Navigation
by George Nicolaou | 22 November, 2018 | Divi Theme Code Snippets | 0 comments

George Nicolaou – Senior Web Developer
Just use the code below. Remember to change colors
/*line under menu start*/
#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: #010f77; /* Change your color here */
width: 100%;
height: 2px;
-webkit-transform: translateY(24px);
transform: translateY(24px);
opacity: 0;
transition: 0.3s ease;
}
/*line under menu end*/