Make Your Navigation Menu Dark

Make Your Navigation Menu Dark

When using section backgrounds and images that require a dark navigation, this CSS is used to invert the light appearance of Divi’s menus. To add this CSS, just simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you decide to revert to the original style, just delete the code from the Custom CSS field.

#top-menu a, .et_mobile_menu a, #et_search_icon:before {
    color: #ddd !important;
}
  
#top-menu a:hover, .et_mobile_menu a:hover {
    color: #fff !important;
}
  
.nav ul li a:hover, .et_mobile_menu li a:hover { color: #111; background-color: #2b2b2b; }
  
#top-menu li.mega-menu > ul > li > a:first-child, .et_mobile_menu li a {
    border-bottom: 1px solid #444;
}
  
#main-header, .et_mobile_menu, .nav li ul , #top-menu li.mega-menu > ul > li > a:first-child:hover, .et-search-form {
    background-color: #333 !important;
}
  
.et-search-form input {
    background-color: #2b2b2b;
    color: #999;
}