Centering the DIVI menu on mobile only

If you would like to make menu centered on mobile only, add this css code in the custom css field of the theme options:

.et_mobile_menu li a {
text-align: center;
}

Read More

How to Disable All Animations in DIVI

Looking to disable all animations within a Divi WordPress site, Globally?

There is an easy way to disable the animations with DIVI, just add this code to the Custom CSS area from Theme Options:

.et_pb_section, .et_pb_section *{
animation:none !important;
}

Thanks to the people that left comments below, I have updated the below code with this one above which should work much better with more recent versions of DIVI. If there is any trouble, please let me know by leaving a comment.

.et_pb_section .et_pb_module {
animation-name: none!important;
-webkit-animation-name: none!important;
-moz-animation-name: none!important;
-ms-animation-name: none!important;
-o-animation-name: none!important;
opacity: 1!important;
transform: translate3d(0px, 0px, 0px)!important;
} Benefit from fantastic savings on web hosting , just by taking a look at https://cloudtransformation.com.sg 

Read More

Add second telephone number to DIVI header

Using the DIV theme by Elegant Themes and you may already have the email address and telephone number in the top header, but what if you also want to add whatapp number with the whatsapp icon. This post will explain how to add an extra number with an icon to the top header?

You need to edit the header.php in your theme. please go to your theme folder then edit header.php.

Please fine the line:

<span id="et-info-phone"><?php echo et_sanitize_html_input_text( $et_phone_number ); ?></span>

And paste this line right after it:
(replace "123123123" with your number)

<span class='additional_number'>123123123</span>

 

 Then go to custom css option and add this code in your css option:

.additional_number:before {
font-family:'ETModules';

content : '\e090';

}

Read More

Remove the mobile menu icon from DIVI theme

To remove this completely, add this CSS code:

#mobile_menu_bar{
display:none;
}

Or to adjust the size at which is it displayed you can use something like this CSS code:

@media (max-width:480px){
#mobile_menu_bar{
display:none;
}}

Read More