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

Read More

Transparent Fields With Gravity Forms

 Add this custom CSS and then set the class in the form you are building to:
“gf_custom_contact”

 

.gf_custom_contact input, .gf_custom_contact textarea, .gf_custom_contact textarea.large {

background-color:transparent !important;

Read More

Remove logo on mobile only with Elegant Themes

This works with DIVI, Extra and other themes from Elegant Themes.

Just add the following code to the Custom CSS field in ePanel:

@media (max-width: 980px) {
#logo {
display: none !important;
}
}

Read More

No menu on homepage only

To make DIVI not display the menu on Homepage only.

Login to WordPress admin and add this CSS to: Divi > Theme Options > General > Custom CSS

.home #top-header, .home #main-header{display: none;}

Read More

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' );

et_slider_auto_rotate();
} );
}

Read More

Disiable Mobile Menu from showing with DIVI theme

To disable the mobile menu. Add this css code in the custom css field of the epanel:

@media only screen and (min-width: 981px){
#main-header div#et_mobile_nav_menu {
display: none;
}
}

Read More

Making DIVI Buttons The Same Size

Please add this css code into Divi > Theme Options > General > Custom CSS field.

#custom-row .et_pb_button {
width: 100%;
}

Read More

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;

Read More