1. Home
  2. AccessAlly
  3. WordPress Themes
  4. How to Make a Full Height Sidebar with Divi Theme

How to Make a Full Height Sidebar with Divi Theme

Heads upDivi 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:

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.

@media (max-width: 980px){

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 May 4, 2022

Was this article helpful?

Related Articles


If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Laptop with the AccessAlly demo site

AccessAlly is the most flexible way to sell and elegantly deliver digital offerings. All in one place.


You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.