Changing the Width of the Divi Sidebar

This post may contain referral links which may earn a commission for this site

The Divi Theme sidebar is quite narrow, and you may find yourself wanting to increase its width.

Changing the Sidebar Width in Divi

Recent versions of Divi include an option for setting the sidebar width. To set the sidebar width:

  1. From your WordPress dashboard, go to "Divi > Theme Customizer > General Settings > Layout Settings" customizer section
  2. Tick the "Use Custom Sidebar Width" box. The sidebar width option will now appear
  3. Set the "Sidebar Width" option to your desired width (as a percentage of the content width, which is 1080px by default)
  4. (Optional) Change the "Website Content Width" option (on the same customizer section) to adjust the combined width of the main content and sidebar
  5. Publish the changes

Changing the Sidebar Width with CSS

Before Divi introduced the sidebar width option mentioned above, it was necessary to use CSS to change the width. Here is the CSS, in case it is useful to anyone. In this example, I'm setting the width to 300px, but you can replace it with your choice of width.

@media only screen and ( min-width: 1100px ) {

    .et_right_sidebar #sidebar .et_pb_widget { 
        margin-right:30px !important;
    }
	.et_left_sidebar #sidebar .et_pb_widget { 
        margin-left:30px !important;
    }
	
    .et_right_sidebar #left-area, 
    .et_left_sidebar #left-area { 
        width:720px !important; /* 1020 - width */
    }
    .et_right_sidebar #main-content .container:before { 
        right:300px !important; /* width */
    }
    .et_left_sidebar #main-content .container:before { 
        left:300px !important; /* width */
    }
    .et_right_sidebar #sidebar,
	.et_left_sidebar #sidebar { 
        width:300px !important; /* width */
    }
}

Other than replacing each instance of 300px with your desired width, you need to replace the 720px with 1020 minus your desired width.

This should set the sidebar (either right or left sidebar) to a width of 300px, on full screens. On smaller screens, the default Divi sidebar width is used.

Old Method

Below is an earlier, less effective method I came up with for setting the right sidebar width. I've kept it here for information, but you probably want to use the method above.

By playing around with the padding and margins, we are able to gain another 60px of usable space, while still getting something that looks good.

Here's the CSS. It's a work in progress and I hope to be able to come up with a way to get more control over the Divi sidebar width in the future:

@media only screen and ( min-width: 1100px ) {
    .et_right_sidebar #sidebar .et_pb_widget { 
        margin-right:30px 
    }
    .et_right_sidebar #main-content .container { 
        width:1140px; padding-left:60px; 
    }
    .et_right_sidebar #main-content .container:before { 
        right:285px; 
    }
    .et_right_sidebar #sidebar { 
        width:285px !important; 
        height:100%; 
        margin-top:-100px; 
        padding-top:100px; padding-bottom:10px; 
    }
}

Note that I've used a media query so that the sidebar is increased only on larger displays – mobiles, etc aren't affected by the changes.

The actual width of the sidebar is set in the last block by the "width:285px !important;" part. You will be able to decrease this to get a narrower sidebar width, but attempting to increase it further will cause the sidebar to jump to the end of the screen.

Hundreds of new features for Divi
in one easy-to-use plugin

11 Comments

  1. Didn't help. saying errors in the code

    Reply
    • Hi Haseeb, are you able to tell me where you are adding the code / what error messages are you getting? Thanks!

      Reply
      • Same here with a red X.

        Reply
        • Hey Ken, are you able to tell me where you're placing the code (e.g. which Divi setting you're using)? Have you tried it in the "Divi > Theme Options > General > Custom CSS" box? If you're adding it via one of the boxes in the "Divi Theme Options > Integrations", for example, you'd need to add <style> tags round the CSS. If you're still having problems, is there a specific error message (you might need to hover over the red X to see it). Thanks!

          Reply
  2. I added this code 'as is' to the Additional CSS section of the Divi theme customizer, saved & refreshed, but there was zero change to the side scrollbar.

    Still stuck with skinny AF scrollbar. Please advise.

    Reply
    • Hey Richard, I've just updated the post with info on how to modify the sidebar width using Divi's built-in options (I originally wrote the post before these options existed). I suggest trying these new instructions as that will be the best way to do it. If you don't have any luck with that and want to figure out why the CSS isn't working, is there any chance you're able to send me a link to the site so that I can take a look at what's going wrong? Cheers!

      Reply
  3. Hi Dan,
    What I've been looking for is a way to make the Divi Theme's sidebar collapse/expand upon clicking a button or icon.

    Can you resize width for sidebar (above) be somehow enhanced to allow full-width left-side (when sidebar is collapsed) AND regular display of left-side (when sidebar is in the default expanded view)?

    Thanks.

    Reply
  4. Awesome, works like a charm. Thanks, Divi Booster!

    Reply
  5. Hi Dan! I continue with your tips! Thanks!

    This code works better than this one that is on Divi Theme Users Facebook Group

    @media only screen and (min-width: 1024px) {.category div#left-area {width: 700px;}.category div#sidebar {width: 315px;}.category #main-content .container:before {right: 330px !important;}.single div#left-area {width: 700px;}.single div#sidebar {width: 315px;}.single #main-content .container:before {right: 330px !important;}}

    The one on the group has problems with Ipad widths

    Thanks again!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *