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

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

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




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