DIVI Mobile Menu Custom Style

This will increase the size of DIVI mobile menu (hamburger icon) and make the bars white.

Add this custom CSS code to your DIVI theme menu:

@media (min-width: 980px) {
.et-fixed-header#main-header {
background-color: #000 !important;

@media (max-width: 980px) {
.et-fixed-header#main-header {
background-color: transparent;
@media (max-width: 980px) {
.et-fixed-header .logo_container {
display: none;

Make the DIVI mobile menu icon Sticky

 To make the DIVI mobile menu icon Sticky add this custom CSS:

.et_header_style_left .mobile_menu_bar {
padding-bottom: 0px !important;
background: #000 !important;

.mobile_menu_bar {
position: fixed;

How to change your subreddit name to an image with CSS

To changes your reddit's name (at the top) to an image. You must include the dimentions
you want your image to be.
.redditname a{
height: ??px;
width: ??px;}

height: ??px;}

.redditname a{

.redditname a,
.tabmenu {
display: inline;
float: left;}


You can view an example of the Reddit CSS Stylesheet here.

Increase padding of WooCommerce image

You may find you need to increase the padding on a WooCommerce products pages with the DIVI theme. You can try this CSS code here here:

.single-product section.related.products {
    clear: both;
    padding-top: 20px;

How to hide the DIVI secondary menu before scroll

You can remove the secondary menubar before scrolling with this CSS snippet below. This will make the primary menu bar visible before scrolling, but the secondary bar only available when scrolled.

The custom CSS code is:

.et_fixed_nav #top-header {
visibility: hidden;

.et_fixed_nav #top-header.et-fixed-header {
visibility: visible;