Add Thin Colored Line Under Menu in DIVI

To add a small colored line below the menu both primary and fixed.  Add this css code to Divi > Theme Options > General Panel > Custom Css and change the marked value:

header#main-header {
border-bottom: 2px solid #ff0000;
}
div#top-header{
border-bottom: 2px solid #ff0000;
}

Read More

Move secondary Menu in DIVI below the Primary Menu

The default location for the secondary menu in the DIVI theme is at the top of the screen.

To make it to be below the Primary menu - between the header and body of the page, add the following in the custom CSS menu.

@media only screen and (min-width: 981px) {
#main-header {
top: 0 !important;
}
#top-header {
top: 134px !important;
} }

Read More

Make all Divi blog posts the same size

This is what your blog module may look like by default. Different size images cause it to look messy.

Before

By adding the below code we can make it look a lot more uniform. Be sure to change post ID number in red.

.page-id-376 .et_pb_post a img {
height: 200px !important;
width: 300px !important;
}

After

Read More

Increase font size of tags in Divi

Add this code to custom CSS box:

.tagcloud a {
font-weight: bold !important;
font-size: 16px!important;
}

Read More

Custom button on Divi main menu

 

To add a button on the menu of the Divi theme, find the menu item ID by right clicking and 'inspect element.' Then add the below code to custom css in theme options.

li#menu-item-61 a {
padding: 0.3em 1em;
border: 2px solid;
margin-bottom: 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #407CD4;
color: #ffffff;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
height: 25px;
padding-bottom: 20px !important;
}

Read More