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;



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

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;

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;

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:

window.location = "";

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.

Change image on hover for DIVI Blurp module

To change the image of a blurp when you hover over it, add this custom CSS and edit the image URL in red with your image.

.et_pb_main_blurb_image:hover {
content: url('') !important;

Convert Bullets List in Checkmarks

If you have a bullet list but and would like to use check marks instead. Add this custom CSS code:

.my-bullet-text ul {
.my-text ul ul li:before {
content: "✓";

Tighten up space between blog grid image and title

To move the title and other text up on DIVI grid, add this css code to Divi - Theme Options - General - Custom Css:

.et_pb_blog_1 .et_pb_post .post-content {
margin-top: -30px;
.et_pb_blog_2 .et_pb_post .post-content {
margin-top: -30px;
.et_pb_blog_3 .et_pb_post .post-content {
margin-top: -30px;

Integrate Contact Form 7 to DIVI styling

The Contact Form 7 plugin is a popular form plugin for WordPress and Agent WP has written this helpful CSS to integrate Contact Form 7 with DIVI.

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
.wpcf7-submit {
color: #f0853b!important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
.wpcf7-submit:hover {
background-color: yellow;
padding: 6px 20px !important;

WooCommerce "Related Products" display issue

If you are having a display issue with WooCommerce "Related Products" section wedging itself between the product image and the product title/description as seen in this image.

Add the following CSS code to your custom CSS box:

section.related.products {
clear: both;

WooCommerce DIVI custom CSS styling

Add this custom CSS to the DIVI theme menu and see a new CSS style on WooCommerce product page.

woocommerce input.button:hover, .woocommerce-page input.button:hover,
a.checkout-button.button.alt.wc-forward:hover {
padding: 10.2px !important;
color: #fff;

.woocommerce-message a.button.wc-forward {
background: #ffffff;
font-family: 'Nunito';
font-size: 16px!important;
color: #424242;
input#coupon_code {
background: #424242 !important;
font-family: 'Nunito';
font-size: 16px!important;
.woocommerce input.button, .woocommerce-page input.button,
a.checkout-button.button.alt.wc-forward {
background: #e02b20;
font-family: 'Nunito';
font-size: 16px!important;
color: #fff;
padding: 10.2px !important;

Change DIVI logo on mobile only

To change the logo on mobile only, add this custom CSS to your theme admin panel:

@media only screen and (max-width: 980px) {
.et_show_nav #logo {
content: url('') !important;

Add word 'menu' next to hamburger on desktop

To add the word "menu" to the hamburger icon on desktop only. Add this code in custom css field of theme option:

li#menu-item-30338 a:before {
content: "Menu" !important;
position: relative !important;
bottom: -18px;
right: 95% !important;

Remove sidebars on DIVI blog

To remove the sidebar area from all blog post, add this css code to Divi - Theme Options - General Panel - Custom Css

.single #left-area {
width: 100% !important;
padding-right: 0;
.single #main-content .container:before {
background: none;
To also include category and archive pages, add this code also:
.category #left-area {
width: 100% !important;
padding-right: 0;
.category #main-content .container:before {
background: none;
.archive #left-area {
width: 100% !important;
padding-right: 0;
.archive #main-content .container:before {
background: none;

How to add additional social icons in the header or footer of Extra

Add new social icons in the header of Elegant Themes Extra theme

1- Open the header.php file and add this code:

<li class="et-extra-social-icon">
<a href="enter link here to page or profile" alt="100% Canadian" class="et-extra-icon et-extra-icon-background-hover"><img src="https://your-image-path.png" /></a> 

right after this code:

 <li class="et-extra-social-icon <?php echo $social_icon; ?>">
<a href="<?php echo esc_url( $social_icon_url ); ?>" class="et-extra-icon et-extra-icon-background-hover et-extra-icon-<?php echo $social_icon; ?>"></a>
<?php } ?>
<?php } ?>

You can then do the same for footer.php if you wish to have the same icon. 

To add a hover colour to social icon like the others, use this code in custom css box of extra:

.et-extra-icon-background-hover:hover {
background: #c0392b!important;

Adding word MENU on mobile menu bars

To add the word "MENU" to your mobile menu along with the hamburger icon. Add this CSS code to your custom CSS box.

.mobile_menu_bar:after {
content: "Menu" !important;
display: block !important;
font-family: initial !important;
position: absolute;
font-size: 20px;
left: 36px !important;
top: 13px !important;

Set a different phone number on specific page with Divi

To add a css rule that displays a different phone number on a specific page, add the following script to the wp-admin>divi>theme options>Integration>Add code to the < head > of your blog:

<script type="text/javascript">
jQuery(document).ready( function() {
jQuery('.page-id-13232 #et-info-phone').text('1-800-282-2822');
} );

Replace the highlighted part with your own phone number and page ID number.

Make DIVI mobile menu appear on Tablet

To make your mobile menu appear on a larger screen size. Login into WordPress admin and in the custom CSS box, add the following code:

@media only screen and (max-width: 1450px) and (min-width: 961px) {
#et_mobile_nav_menu {
display: block;
#top-menu {
display: none;
#main-header {
position: absolute !important;

Hide top header on specific DIVI page

Login to WordPress admin then go to Divi > theme options > custom css.
.page-id-1518 header#main-header {
display: none;

.page-id-1518 #page-container {
padding-top: 0px !important;
margin-top: -1px !important;

If you are unsure of the post ID then you can check this video on how to find it

Vertically align Divi button

Looking to vertically align your Divi button? Simply add the following CSS code to your Custom CSS box in Divi Theme Options:

.et_pb_row .et_pb_button {
position: relative;
top: 60px;

Want this change to only happen on desktop? Replace the above code with:

@media only screen and (min-width: 1024px) {
.et_pb_row .et_pb_button {
position: relative;
top: 60px;

Reducing padding in a Divi Row

When you create a page with Divi you will notice that by default, it has quite a generous amount of padding space. 

Here is the example before.

What we are looking is tighten this up and align. We want to make sure that the button is better aligned on desktop only as forcing extra padding can cause it to disappear on mobile or tablet sized screens. We did this by adding the below code to the custom CSS box in Divi theme options:

.home .et_pb_section,.home #main-content .et_pb_section { padding: 0; }
.home .et_pb_section,.home #main-content .et_pb_section .et_pb_row{ padding: 0; width: 100%; }

@media only screen and (min-width: 1024px) {
.et_pb_row .et_pb_button {
position: relative;
top: 60px;

The end result is like this below. I vertically aligned the button as from this post.

How to remove the responsive functionality from Elegant Themes Exlorable

If you have used Elegant Themes before you will know that they are full of bugs and quite poorly coded. Good news is there are resources like cssDorks to help you fix these issues. One problem with the Exlorable theme is that is not functional with mobile devices. Although Elegant Themes claim that it works without issue. You can see from this screenshot of their current demo that it does not properly.

A solution for Elegant Themes bugs

Although not ideal, there are so many bugs with the Exlporable theme that you may want to use another theme altogether. Or simply remove the mobile responsive functionality as this is where most of the bugs are.

To remove the responsive functionality from Exlorable

Open style.css and remove this code:

@media only screen and ( max-width: 1440px ) {
#et-slider-wrapper { width: 400px; top: 100px; }
#et-slider-wrapper .et-description { top: 74px; }
#et-slider-wrapper .viewport { width: 280px; height: 119px; }

#et-slider-wrapper:after { width: 394px; }

@media only screen and ( max-width: 960px ) {
#et-search, p#et-search-title, p#et-search-title span { background: none !important; }
#et-search { width: auto !important; height: auto !important; }
#et-search-inner { padding: 0 !important; }
#et-search-right { float: none !important; clear: both; text-align: left !important; }
#et_search_submit { background: #BBB8B8 !important; color: #111 !important; }
p#et-search-title { margin-bottom: 2px !important; }
p#et-search-title span { padding: 0 !important; text-shadow: none !important; }
#et-searchinput { width: auto !important; }
p#et_choose_posts, p#et_choose_pages, p#et_choose_date, p#et_choose_cat { float: none !important; }
#et-search-left { float: none !important; width: 100% !important; }

body.et_map_full_screen { overflow-y: auto; }

#et-slider-wrapper, .et-search-form, #et-list-view .et-date, #et-listings:before, #top-navigation { display: none; }
#et_main_map { height: 398px; }
body.et_map_full_screen #main-header { position: relative; z-index: 10; }
#filter-bar { position: relative; }
#et-list-view { position: relative; right: auto; width: auto; height: auto; }
#et-list-view .viewport, .overview li { width: auto; height: auto; }
#et-list-view .overview { width: 100%; position: relative; }
#et-list-view .scrollbar { display: none; }

.overview ul { width: 98%; }
.overview li { border-right: 1px solid #bfbfbf; -webkit-box-shadow: 1px 0 1px #dcdcdc; -moz-box-shadow: 1px 0 1px #dcdcdc; box-shadow: 1px 0 1px #dcdcdc; }
.overview .et-mobile-link { display: block; }

#main-header .container { text-align: center; }
#logo { float: none; }

#et_mobile_nav_menu { display: block; margin: 24px 0 0; padding: 22px 0 0; }

.et-normal-listings { display: none; }
.et-mobile-listings { display: block; }

#et_contact_right { width: auto !important; margin-left: 0 !important; float: none !important; clear: both !important; }

@media only screen and ( min-width: 768px ) and ( max-width: 960px ) {
.container { width: 730px; }
#left-area { width: 369px; }
#sidebar { width: 151px; padding-left: 45px; padding-right: 45px; }
#content:before { width: 241px; }
.footer-widget { width: 183px; }
.post-description { top: 67px; }
#main-area .et-description { top: 110px; }

.et_pt_gallery_entry { margin-left: 75px !important; }

#et_pt_portfolio_gallery { margin-left: -35px !important; margin-right: -20px !important; }
.et_pt_portfolio_item { margin-left: 19px !important; width: 201px !important; }
.et_portfolio_more_icon, .et_portfolio_zoom_icon { top: 50px !important; }
.et_portfolio_more_icon { left: 65px !important; }
.et_portfolio_zoom_icon { left: 106px !important; }

#et_pt_portfolio_gallery.et_portfolio_small { margin-left: -39px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_pt_portfolio_item { margin-left: 13px !important; width: 117px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_zoom_icon { top: 20px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_more_icon { left: 26px !important; }
#et_pt_portfolio_gallery.et_portfolio_small .et_portfolio_zoom_icon { left: 62px !important; }

#et_pt_portfolio_gallery.et_portfolio_large { margin-left: -42px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item { margin-left: 9px !important; width: 321px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { top: 99px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon { left: 140px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { left: 178px !important; }

@media only screen and ( max-width: 767px ) {
.container { width: 440px; }
#main-header .container, #filter-bar .container { width: 400px; }

#left-area { width: auto; float: none; padding: 43px; }
#sidebar, #content:before { display: none; }

#et-header-bg { height: 179px; }

.filter-type { display: block; margin: 0 0 18px; text-align: center; }
.filter-type ul { width: 360px; }
#et-filter { display: block; width: 100%; }

.post-description { top: 52px; }

.footer-widget { float: none; width: auto; margin-right: 0; }

.et-description h1, .post-description h2, .post-description h1 { font-size: 30px; padding-bottom: 2px; }
.meta-info, .et-description p { font-size: 14px; }

#et_main_map, #et-single-map { height: 180px; }
#main-area .et-description { top: 48px; }

.entry-post .post-thumbnail { margin: 0 -43px 52px; }
.entry-post:first-child .post-thumbnail { margin-top: -43px; }
#comment-wrap:before, #respond:before { left: -43px; right: -43px; }
#left-area .wp-pagenavi { margin-left: -43px; margin-right: -43px; }

.commentlist .children { padding-left: 0; }

.sitemap-col { float: none !important; width: auto !important; }

.et_pt_gallery_entry { margin-left: 98px !important; }

.et_pt_portfolio_item { margin-left: 79px !important; }

.et_portfolio_small .et_pt_portfolio_item { width: 380px !important; margin-bottom: 10px; margin-left: 44px !important; }
.et_portfolio_small .et_pt_portfolio_entry { float: left; margin-right: 15px; }
.et_portfolio_small .et_portfolio_more_icon, .et_portfolio_small .et_portfolio_zoom_icon { top: 30px !important; }
.et_portfolio_small .et_portfolio_more_icon { left: 38px !important; }
.et_portfolio_small .et_portfolio_zoom_icon { left: 77px !important; }

#et_pt_portfolio_gallery.et_portfolio_large { margin-left: -23px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item { margin-left: -4px !important; width: 404px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { top: 109px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon { left: 155px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { left: 195px !important; }

@media only screen and ( max-width: 479px ) {
#main-header .container, #filter-bar .container, .container { width: 280px; }

#left-area { padding: 37px 21px; }

.filter-type { display: block; margin: 0 0 18px; text-align: center; }
.filter-type ul { width: 240px; }
#et-filter { display: block; width: 100%; }

.et-description h1, .post-description h2, .post-description h1 { font-size: 24px; }
.meta-info, .et-description p { font-size: 12px; }
.post-description { top: 23px; }
#left-area .wp-pagenavi { font-size: 24px; }

#main-area .et-description { top: 19px; }

.entry-post .post-thumbnail { margin: 0 -21px 52px; }
.entry-post:first-child .post-thumbnail { margin-top: -37px; }
#comment-wrap:before, #respond:before { left: -21px; right: -21px; }

#commentform input[type="text"], #et-rating > div { width: 44%; }

.et_pt_gallery_entry { margin-left: 44px !important; }

.et_pt_portfolio_item { margin-left: -8px !important; }

.et_portfolio_small .et_pt_portfolio_item { width: 255px !important; margin-left: 0 !important; }

#left-area .wp-pagenavi { margin-left: -21px; margin-right: -21px; }

#et_pt_portfolio_gallery, #et_pt_portfolio_gallery.et_portfolio_large { margin-left: -39px !important; }
#et_pt_portfolio_gallery.et_portfolio_large .et_pt_portfolio_item { margin-left: 42px !important; width: 228px !important; }
.et_portfolio_more_icon, .et_portfolio_zoom_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { top: 53px !important; }
.et_portfolio_more_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_more_icon { left: 70px !important; }
.et_portfolio_zoom_icon, #et_pt_portfolio_gallery.et_portfolio_large .et_portfolio_zoom_icon { left: 110px !important; }

#et_pt_portfolio_gallery { margin-left: -7px !important; }

.et_pt_portfolio_item.et_portfolio_small { margin-left: 20px !important; }

.et_portfolio_small .et_pt_portfolio_item { width: 255px !important; margin-left: 0 !important; }

then open functions.php and remove this

add_action( 'wp_head', 'et_add_viewport_meta' );

How can I change background color of WHMCS shopping cart bar

With the order forms templates, you can't use custom.css - you need to directly edit style.css - in your case, standard_cart/style.css and change the CSS code below:

#order-standard_cart .view-cart-items-header {
    margin: 0;
    padding: 8px 15px;
    background-color: #058;
    color: #fff;
    font-size: 0.9em;
    border-radius: 4px 4px 0 0;  


Change Colour of WHMCS Update Box

To change the colour of the Green Update box pictured on the right. Add the following CSS overrides:

.btn-success:focus { /* secondary button */
    color: #000;   
    background: #f0b945;
    border: none;

.btn-success:hover {
    color: #fff;   
    background: #f0b945;       
    border: none;

Move DIVI Fullwidth Slider Text to Left or Right

Simply add the following CSS code to custom CSS box in theme options.

.et_pb_fullwidth_slider_0 .et_pb_slide_1 .et_pb_slide_description{
.et_pb_slide_description {
float: left;
padding-left: 0;
width: 65%;
padding-bottom: 0px;
.et_pb_slider .et_pb_container {
max-width: 100%;
width: 100%;
float: left;

Make Divi fullwidth portfolio items not clickable

The fullwidth portfolio is a nice feature in DIVI. Especially the grid mode. You may not want each project to be clickable so to disable the links for projects with the fullwidth portfolio add the following code to custom CSS menu:

.et_pb_fullwidth_portfolio {
pointer-events: none !important;

DIVI menu text bold on hover

The menu text upon mouse hover, will change to bold. When the mouse leaves, it returns to "no bold." However, if you click the item, it will stay bold.

To achieve  this, add the following code to custom CSS menu:

#top-menu li a:hover, #top-menu li a:active {
font-weight: bold;

Transparent Fields With Gravity Forms

 Add this custom CSS and then set the class in the form you are building to:
.gf_custom_contact input, .gf_custom_contact textarea, .gf_custom_contact textarea.large {
background-color:transparent !important;

Disable pause on hover for DIVI slider module

UPDATE: There is now a more simple solution. Add et_slider_auto_ignore_hover in Gallery Module Settings > Custom CSS tab, as shown below.

The DIVI slider now defaults to "pause on hover" and there is no setting currently available to disable pause on hover. To turn in off you need to login to your web hosting control panel or FTP to: wp-content/themes/Divi/js/custom.js

 From this file you can remove the following:

if ( settings.slideshow && et_slides_number > 1 ) {
$et_slider.hover( function() {
$et_slider.addClass( 'et_slider_hovered' );

if ( typeof et_slider_timer != 'undefined' ) {
clearInterval( et_slider_timer );
}, function() {
$et_slider.removeClass( 'et_slider_hovered' );

} );

Add drop shadow to image

To add drop shadow to an image, go on that image module -> custom css -> main element and add this code :

-webkit-box-shadow: -29px 35px 35px -11px rgba(0,0,0,0.61);
-moz-box-shadow: -29px 35px 35px -11px rgba(0,0,0,0.61);
box-shadow: -29px 35px 35px -11px rgba(0,0,0,0.61);
border-radius: 50% !important;