CSS Snippets

I have found that a good amount of Divi restraints can be overcome with a little CSS. It can be placed either site-wide or just for a page.

To change the mobile menu icon (hamburger) color:

span.mobile_menu_bar:before { color: #ffffff !important; }

To hide to top menu bar (global):

#main-header {display: none;}

To hide the global footer:

#main-footer {height: 0 !important; overflow: hidden; }

To style a Divi full width header, you can:

@media only screen and ( min-width: 981px ) {

.et_header_style_left #et-top-navigation {
padding-top: 0px !important;
}

.et_header_style_left #et-top-navigation nav>ul>li>a {
padding-top: 28px; padding-bottom: 28px; padding-left: 35px; padding-right: 35px;
}

#top-menu li {
padding-right: 0px; margin-left: -4px;
}

#top-menu li.current-menu-item {
background-color: #f5f5f5;
}

#top-menu li a:hover {
background-color: #f5f5f5;
}

}

.et_pb_menu .et-menu>li {
padding-left: 25px;
padding-right: 25px;
}