Showing posts with label elegant themes. Show all posts
Showing posts with label elegant themes. Show all posts

Force the DIVI secondary to not merge with the mobile menu and remain even on mobile

You can force the menu items to remain visible in the secondary header on mobiles using this CSS:

@media screen and (max-width: 980px) {

#page-container {

padding-top: 0px !important;


#top-header {

position: static !important;

display: block !important;


#top-header .container {

padding-top: 0.75em !important;


#page-container #main-header {

position: relative !important;

top: 0 !important;


#top-header #et-secondary-menu,

#top-header #et-secondary-nav {

display: block !important;


#top-header #et-secondary-nav li {

text-align: center !important;


#et-main-area {

padding-top: 1px;



Increase the logo size on mobile with the Elegant Themes Extra theme

 The logo will appear small on the Extra theme. Please, go to your WordPress Dashboard > Divi > Theme Options > Custom CSS and add the following:

@media (max-width: 480px){


    height: 110px !important;

    max-height: 110px !important;

    width: 130px !important;

    position: relative !important;

    top: -31px !important;



You can change this code according to your requirements.

Change the Latest Tweets font color in Elegant Themes Extra footer

The Elegant Themes Extra theme has a Twitter app built in. You can see how to create a Twitter app but you once complete, you may notice that you cannot read the tweet text. This is because it is the same color as the footer background.

To change this simply add the below CSS code:

.post-tweet {
    color: #fff!important;

Before adding the CSS
After adding the CSS

Add a transparent overlay to Fable theme featured image

If you are running the Fable theme for WordPress by Elegant Themes, then you may notice this little bug when you use features images. The text or post title of the WordPress post is usually hidden because it cannot be seen over the featured image.

To add the transparent overlay please add the following code to the Custom CSS box in the ePanel options:

.category {
.category .post.entry .container.clearfix {
z-index: 9999999;

Upgrade the style of DIVI category and archive blog pages

By default the DIVI blog category page style is basic. You can see an example in the picture below from the TweakDorks website.

By adding this in the custom css section in the theme options you can improve the style of your DIVI blog pages.

.archive img[width="1080"] {
max-width: 300px;
float: left;
margin-right: 20px;
.archive .et_pb_post {
border-top: 5px solid #F13361;
box-shadow: 0 0 10px #ddd;
padding: 10px;

Here is an example:

Changing color of Thank You message for DIVI Contact form

To do this, add a custom CSS class to that particular Module Settings / Advanced / CSS ID & Classes say custom-contact, then add the following code to Dashboard / Appearance / Customize / Additional CSS:

.my-new-contact .et-pb-contact-message {
color: #333;

You can play with the value to achieve the desired result.
Let me know the result.

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

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.

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: "✓";

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;