Heads up – Divi is a 3rd party theme and page builder plugin. When using 3rd party tools we always recommend reaching out to that company for support. If you review this article and would like to try something different – Divi technical support is the best place to learn more.
Are you trying to create a full height sidebar with Divi theme, that fills the whole space, from top to bottom?
Here’s what you might get out of the box on a Divi sidebar, with extra space above and below:
ARTICLE CONTENT:
Step 1: Remove Extra Padding at the Top & Bottom
Here’s the video tutorial showing you how to remove the extra padding at the top and bottom of your Divi pages.
You’ll want to follow the screenshot tutorial below as well, to finish the process and add the final piece of code that makes this work no matter how tall your “main content” section is.
Step by Step Screenshots to Remove Padding
You’ll want to make this change on one page first, and then duplicate it across all of your other pages. You can do that by saving your layout to the Divi Library.
Start with editing the WordPress Page and click on the Module Settings editor.
Then navigate to the “Design” tab and enter “0” (zero) for both Top and Bottom padding. Then hit Save & Exit.
Once back on the WordPress Page, click the “Row Settings” editor button.
Then navigate to the “Design” tab and enter “0” (zero) for both Top and Bottom padding. Before you click “Save & Exit”, click on the “Advanced” tab.
On the Advance tab, add a CSS class named “full-height-menu-container”. (Just copy & paste this exact class name into this box, you’ll see how we’ll use it below.)
Next, we’ll click on the “Divi Builder Settings”.
From there, you’ll copy and paste the following code into the CSS section.
.full-height-menu-container{
display:flex;
}
.full-height-menu-container>.et_pb_column:first-child{
background-color:#00bf95;
}
@media (max-width: 980px){
.full-height-menu-container{
display:block;
}
}
Important: you’ll want to change the background-color to match the color you want to use in the CSS code block above.
Hit save on your page, and reload it to make sure that your settings are working. You should see a full height sidebar, even if you have more content in other sections of your page.
Styling Your Menu Items in Divi
You might want to style your menu items to look a little fancier, and here is some additional CSS code that you can use as a starting off point. Credit for the following code goes to Wil Palermo.
Open the sidebar module.
Go to Advanced and enter a CSS class (we used “my_menu_widget”).
Go to the Divi Theme Options and add these lines of code, and be sure to change the colors to match your desired look and feel:
/* start of my menu widget */
.my_menu_widget .et_pb_widget ul.menu li > a {
border-color: #A6D8DE;
border-style: solid;
border-bottom-width: 1px;
padding-left: 22px;
background-image: url(/wp-content/uploads/2017/06/menu-widget-arrow.png);
background-repeat: no-repeat;
background-position: right center;
padding-right: 40px;
color: #FFFFFF;
background-color: #66A0B0;
}
.my_menu_widget .et_pb_widget ul li a {
height: auto;
line-height: 40px;
display: block;
width: auto;
padding: 0 15px;
box-sizing: border-box;
-moz-box-sizing: border-box;
white-space: nowrap;
}
.my_menu_widget .et_pb_widget ul li {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my_menu_widget .et_pb_widget ul li a:hover {
background-color: #A6D8DE;
}
.my_menu_widget .et_pb_widget ul li.current_page_item > a {
background-color: #363636;
}
/* end of my menu widget */
Here’s an example of what the code above will look like once it’s added to the pages:
