Parent items in DIVI menu not clickable

To make the main menu items or 'parents' in the menu non clickable. You can link them to a # as many people do as a work-a-around. You can also add this custom CSS.

#top-menu .menu-item-has-children>a:first-child {
pointer-events: none;
}

Read More

Change the background colour on menu for active item

To change the background colour on the DIVI menu for the active menu item, add the following custon CSS:

.fullwidth-menu a:hover, .current-menu-item a {
background-color: #000 !important;
}

Read More

Resize and Restyle the DIVI comments

Here is some custom css to style the comment thread on the Elegant Themes DIVI theme.

.single-post .comment-body {padding-left: 0; padding-right: 0;}
.single-post .et_pb_button::after, .single-post .et_pb_button::before{content: none;}
.single-post #comment-wrap .comment-reply-link.et_pb_button {position: absolute; top: 100%;}
.single-post #commentform .form-submit .et_pb_button:hover {color: #000 !important; background-color: #fff !important; border: 2px solid #000 !important;}

Read More

Custom Slider Style for Blog Post in DIVI

Here is a custom CSS snippet to re-style a blog post in slider module:

.my_new_slider .et_pb_slides .et_pb_slider_container_inner{
width: 50% !important;
vertical-align:top !impoartant;
} 

Read More

How to make DIVI blog featured images the same height

Unless you upload your DIVI images the same size or proportions, then they may appear to have mixed sizes. This code is not perfect but does help tidy them up a bit.

.et_pb_post img {
max-height: 400px!important;
}

Read More

Change the height of DIVI blog grid layout

To make this more of a square, just add this css code to Theme Options > General Panel > Custom Css 

.et_pb_blog_grid .et_pb_image_container img {
height: 230px;
}

 

Read More