Transparent sticky top header DIVI menu

This will make the navigation "sticky"and overlapping the hero (slider) with NO BACKGROUND (transparent) when the page loads, and when you scroll down, the background will appear.

Go to divi >> theme options >> custom css and add:

.et_fixed_nav.et_show_nav #page-container, .et_non_fixed_nav.et_transparent_nav.et_show_nav #page-container{
padding-top:0 !important;
}

Before

After

Read More

Change DIVI menu hanburger icon color

 To make the DIVI hamburger icon a different color, add the below custom CSS code:

.et_mobile_menu {
border-top-color: #fff!important;
}

Read More

Change DIVI mobile menu background color

Looking to change the background color of the menu different just for mobile interface.
For desktop, you enter the color by the theme customizer.

This will change just for mobile, add this code to the Custom CSS area from Theme Options:

@media only screen and (max-width: 767px) {
#mobile_menu {background-color: PLACE THE COLOR HERE;}
}

Read More

DIVI header overlapping Woocommerce checkout page

On the Woocommerce checkout page only, the header comes down over some of the checkout section and interferes with the functionality. It won't let you remove products.

Add the following custom css to the Custom CSS field of epanel > general settings:

.woocommerce-cart form.woocommerce-cart-form {
padding-top: 300px;
}

Read More

Change the color of a link with CSS

To change the color of a link with CSS add the following to make link text white:

a {
    color:#fff;
}

Read More

Add Star Rating to Gravity Forms

By adding the Survey module that comes with Gravity Forms, you can create star ratings. By default the star is pretty small but I found this code from GravityWP that makes them much bigger as pictured below.

Enter this custom CSS code:

.gsurvey-rating:not(:checked) > label, .gsurvey-rating:not(:checked) > label:hover, .gsurvey-rating:not(:checked) > label:hover ~ label, .gsurvey-rating:not(:checked) > label, .gsurvey-rating:not(:checked) > label:hover, .gsurvey-rating:not(:checked) > label:hover ~ label, .gsurvey-rating > input:checked ~ label {

width: 65px;

line-height: 50px;

background-size: 50px 50px;

color: rgba(221, 221, 221, 0) !important;

}

Read More

Redirect DIVI homepage to external URL

If you are looking to redirect the WordPress home page of DIVI or EXTRA, you can do so by adding this code:

<script>
window.location = "http://www.thexyz.com/";
</script>

You will need to add the above code as Code in the DIVI editor. There are also a few other ways to achieve this. I found this way to be quick, easy and pretty fool-proof.

Read More