1. Home
  2. AccessAlly
  3. WordPress Theme Customization
  4. Styling The Divi Sidebar – How to Make Your Sidebar Stretch To Full Height
  1. Home
  2. AccessAlly
  3. Styling The Divi Sidebar – How to Make Your Sidebar Stretch To Full Height

Styling The Divi Sidebar – How to Make Your Sidebar Stretch To Full Height

Are you trying to create a sidebar on Divi 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:

The First Step is Removing 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:

Sidebar Final Result

Updated on November 29, 2018

Was this article helpful?

Related Articles