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;

}

}

Read More

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){

#logo{

    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.

Read More

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

Read More

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 .post.entry.et-background-image:before {
content:'';
display:block;
width:100%;
height:100%;
z-index:999;
position:absolute;
top:0;
background:rgba(0,0,0,0.5);
}
.category .post.entry .container.clearfix {
z-index: 9999999;
}

Read More

Change Foxy Theme Footer to have a background imae

 If you wish have an image as the background, add this CSS code.

footer#main-footer {
background: url(/wp-content/uploads/image.jpg) !important;
}

Read More

Lucid homepage slider aligned too far right

If you notice that the Elegant Themes Lucid Theme has alignment issues when you zoom in and out on the homepage, add the following Custom CSS to fix the issue.

#featured_section {margin: -58px 0 56px;}
#switcher li { width: 316px;}

Read More

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:

Read More

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.

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

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

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 {
list-style-type:none!important;
}
.my-text ul ul li:before {
content: "✓";
color:black;
float:left;
padding-right:5px;
}

Read More

How to remove the widget title bar on Extra

If you are using the Extra theme from Elegant Themes, you will notice the pointless and ugly bar that appears even if you have no text in the title of the widget. This custom CSS will take care of removing this bar:

.widgettitle {display: none; }

Read More

Move logo up on Elegant Themes Origin theme

By default the Origin theme has logo top padding of 64px. To move it up I have adjusted this to 10px.

To move the logo up on Origin, simply add this code to custom CSS box:

#info-area { float: left; position: relative; padding-top: 10px!important; }

Read More

How to change nav menu background color on Origin theme

This below code will change the left nav menu to white:

#info-bg, #main-wrap:before { background: #fff!important; }

Read More

How to disable Trending feature on Extra

To turn off the Trending bar on Elegant Themes Extra theme, add the following CSS in the Theme Option.

.et-trending{
visibility: hidden;
}

Read More

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>
</li>
<?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;
}

Read More

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

Read More

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');
} );
</script>

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

Read More

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

Read More

Custom image in DIVI header

To add a custom image to the header on DIVI please go to divi -> theme options -> custom css and add this code :

#main-header{
background-image:url("YOUR URL GOES HERE") !important;
}

Read More