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

Before

After

Read More

Change DIVI menu hanburger icon color

 To make the DIVI hamburger icon a different color, add the below custom CSS code:

.et_mobile_menu {
border-top-color: #fff!important;
}

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

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

Read More

Change the color of a link with CSS

To change the color of a link with CSS add the following to make link text white:

a {
    color:#fff;
}

Read More

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;

}

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

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('http://www.example.com/wp-content/themes/Divi/images/logo.png') !important;
}

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

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

 

 

Read More

Disable sync clients from showing in ownCloud

Add this custom CSS to hide the sync clients from showing in ownCloud.

#app-navigation li > a {
min-height: 0px;
}

a[href="#clientsbox"] {
visibility:hidden;
height: 0px;
}

div#clientsbox {
visibility: hidden;
width: 0px;
height: 0px;
}

Read More

Hide search bar on wpDataTables

By default the wpDataTables plugin may display a search bar on all of your tables. I added this simple CSS code to hide it:

.dataTables_filter {display: none; }

Read More

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;
border-color:yellow;
padding: 6px 20px !important;
}
</code>

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

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

Read More

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

Read More

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('http://www.domain.com/logo.png') !important;
}
}

Read More

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

Read More

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

Read More

Nav menu a different colour on different pages with DIVI

Add this css code to Divi->Theme Options->General Panel->Custom Css and change the red marked value:

.page-id-333 #top-menu li a { color: #66ff00; }

Read More

Remove widget area on one page only with DIVI

Want to remove the widget area on one page only? First you need to find the page ID number then add the following CSS code, editing the page ID.

.page-id-244 #main-footer>.container{
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

Disable the Register button on Vanilla Forums

Just add the below code to your current themes custom.css file:


a.Button.RegisterLink, a.Button.ApplyButton {
visibility:hidden;
display:none;
}

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

Remove DIVI footer menu from mobile and tablet only

To hide or disable the footer menu from mobile and tablet site only. Please go to DIVI > Theme options > Custom css and add this code:

@media (max-width:980px){
#main-footer{
display:none;
}}

Read More

Center DIVI Footer Menu Links

Login to WordPress admin and add this css code to Divi > Theme Options > General Panel > Custom Css:

.bottom-nav {
text-align: center;
}

 

Before

 

After 

 

Read More

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

Read More

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

Read More

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.

Read More

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

Read More

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;  

 

Read More

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,
.btn-success:active,
.btn-success:focus { /* secondary button */
    color: #000;   
    background: #f0b945;
    border: none;
}

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

Read More

Hiding Client Home Page Knowledgebase Search Feature in WHMCS

Add the line below to /templates/six *or your custom template*/css/custom.css

 .home-kb-search {display: none;}  

Read More

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{
text-align:left!important;
}
.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;
}

Read More

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

Read More

Center Align Extra Widget Title Text

If you align images or text in the Extra theme footer widgets you  notice that the title text does not follow suit. Simply add the following CSS code to custom CSS box in theme options.

.widgettitle {
text-align: center !important;
}

Before

After

Read More

Center "Related posts" text in Extra DIVI Builder

Looking to center the text displayed on the "Related posts" at the end of the post?

Please add the following css code into custom css of your theme's epanel /Divi theme options

.related-post .title {
text-align: center !important;
}

Read More

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

Full width featured images on Divi posts page

Looking to make the featured images full width? Add this css code to Divi->Theme Options->General Panel->Custom Css:

.home #main-content .container {
width: 100% !important;
}
.home #main-content .et_pb_post img,.home #main-content .et_pb_post h2.entry-title {
width: 100%;
}

Read More