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;
}

DIVI Theme Accent color over-rides WooCommerce buttons

If you use the WordPress DIVI theme with WooCommerce, then perhaps you have noticed the style of the buttons have changed.

This CSS snippet is all you need to fix the issue.

.woocommerce .button {
background:red !important;
color: #fff !important;
}

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{
background:url(IMAGE);
height: ??px;
width: ??px;}

#header-bottom-left{
height: ??px;}

.redditname a{
text-indent:-9001px;
}

#header-img-a,
.redditname a,
.tabmenu {
display: inline;
float: left;}

.tabmenu{
position:relative;
top:100%;
margin-top:-16px!important;}


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

Hide the downvote arrow on Reddit subreddit

You can customize your sub-reddit page with CSS. To hide the downvote arrow, simply enter this CSS code:

.arrow.down {
visibility: hidden;
display: none
}


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;
}