Make the Divi Sidebar Collapsible

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

Make the Divi Sidebar Collapsible

Here's a tip for giving the Divi Theme a collapsible sidebar. It adds a button to left and right sidebar pages / posts which, when clicked, collapses the sidebar and converts the page / post to full-width. Clicking the button again restores the sidebar.

The sidebar collapse button is added just below the header in the corner, on the same side as the sidebar. Here's how it looks (I've marked it with an orange box for clarity, but the box won't be there when you implement it on your own site):

Manually adding the Collapsing Sidebar

To achieve the collapsing sidebar effect, we can use the following combination of CSS and jQuery code:

You can add this to Divi by pasting the whole lot into the "Divi > Theme Options > Integration > Add code to the head of your blog" box.

Adding the Collapsing Sidebar using Divi Booster

I've added an option to make the sidebar collapsible in Divi Booster (v2.7.0 onwards). To activate it, simply enable the "Sidebar > Make the sidebar collapsible" option on the Divi Booster settings page.

Want get more out of Divi?

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

11 Comments

  1. Great script. Is there a way to make the sidebar collapsed by default when page loads? Thanks.

    Reply
    • Hi Sarah, I haven't had a chance to try it yet, but I think you should be able to do it just by hiding the sidebar with CSS initially. That is, add:

      #sidebar { display: none; }
      

      To the "Divi > Theme Options > General > Custom CSS" box. If that doesn't help, let me know. Thanks!

      Reply
    • Hi Derek, as you have it at the moment, the Elk Grove page is set to a "No Sidebar" layout. The collapsible sidebar code requires the sidebar to already be enabled on the page – it doesn't activate it. If you enable the sidebar on the page then it should start working.

      To do so, edit the page in the back-end (i.e. in the WordPress admin area, not the front-end visual builder) and look for the "Divi Page Settings" box on the right-hand side (above the Publish box). There might be a "Page Layout" option already there, or you can add it using Divi Booster's "Divi Builder > Standard Builder > Add Page Layout option on Divi Builder pages / supported CPTs" to enable it. Then set the "Page Layout" to "Right Sidebar".

      Hopefully that will do the trick, but let me know if not. Thanks!

      Reply
  2. Hi Dan,
    is it supposed to work with the sidebar module as well? I couldn't figure it out. Thanks!

    Reply
    • ​Hi Amalia, the code is currently only for the theme sidebar, not the sidebar module, I'm afraid. I can't see any easy way to convert the code to work with the sidebar module, as the structure of the two types of sidebar are very different – it would essentially require a complete rewrite of the code to get it to work. ​I'll update here if / when I'm able to come up with a way to do it. Thanks!

      Reply
  3. Hi Dan,

    I have the Divi Booster plugin and I activated this function to make the sidebar collapsable.

    A couple of days later and now I want to disable it, so I deactivated it, yet the collapsable sidebar is still there.

    Any ideas?

    Thanks.

    Reply
    • Hi Tom, I think this will be a caching issue. Disabling the feature in Divi Booster will have removed the code from your site, but it's possible that an old version of the page is being stored in a cache. If you have any performance plugins running, try clearing their caches and then your browser cache too. Hopefully that will let you see the latest version of the page / solve the issue. If not, is there any chance you can share a link to the site you're working on? Thanks!

      Reply
      • It was indeed the cache! Thanks!

        Reply
  4. This hack can be used to turn the sidebar into a vertical collapsible slide-in menu? Like the yellow one in https://lacaballeria.co

    Reply
    • Hi Luis, that's essentially the idea. It's a bit more basic that the sidebar example you link to, in that it starts open and doesn't display social icons, etc, when collapsed. But it does allow the sidebar to be expanded / collapsed in much the same way as in the example.

      Reply

Submit a Comment

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

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

11 Comments

  1. Great script. Is there a way to make the sidebar collapsed by default when page loads? Thanks.

    Reply
    • Hi Sarah, I haven't had a chance to try it yet, but I think you should be able to do it just by hiding the sidebar with CSS initially. That is, add:

      #sidebar { display: none; }
      

      To the "Divi > Theme Options > General > Custom CSS" box. If that doesn't help, let me know. Thanks!

      Reply
    • Hi Derek, as you have it at the moment, the Elk Grove page is set to a "No Sidebar" layout. The collapsible sidebar code requires the sidebar to already be enabled on the page – it doesn't activate it. If you enable the sidebar on the page then it should start working.

      To do so, edit the page in the back-end (i.e. in the WordPress admin area, not the front-end visual builder) and look for the "Divi Page Settings" box on the right-hand side (above the Publish box). There might be a "Page Layout" option already there, or you can add it using Divi Booster's "Divi Builder > Standard Builder > Add Page Layout option on Divi Builder pages / supported CPTs" to enable it. Then set the "Page Layout" to "Right Sidebar".

      Hopefully that will do the trick, but let me know if not. Thanks!

      Reply
  2. Hi Dan,
    is it supposed to work with the sidebar module as well? I couldn't figure it out. Thanks!

    Reply
    • ​Hi Amalia, the code is currently only for the theme sidebar, not the sidebar module, I'm afraid. I can't see any easy way to convert the code to work with the sidebar module, as the structure of the two types of sidebar are very different – it would essentially require a complete rewrite of the code to get it to work. ​I'll update here if / when I'm able to come up with a way to do it. Thanks!

      Reply
  3. Hi Dan,

    I have the Divi Booster plugin and I activated this function to make the sidebar collapsable.

    A couple of days later and now I want to disable it, so I deactivated it, yet the collapsable sidebar is still there.

    Any ideas?

    Thanks.

    Reply
    • Hi Tom, I think this will be a caching issue. Disabling the feature in Divi Booster will have removed the code from your site, but it's possible that an old version of the page is being stored in a cache. If you have any performance plugins running, try clearing their caches and then your browser cache too. Hopefully that will let you see the latest version of the page / solve the issue. If not, is there any chance you can share a link to the site you're working on? Thanks!

      Reply
      • It was indeed the cache! Thanks!

        Reply
  4. This hack can be used to turn the sidebar into a vertical collapsible slide-in menu? Like the yellow one in https://lacaballeria.co

    Reply
    • Hi Luis, that's essentially the idea. It's a bit more basic that the sidebar example you link to, in that it starts open and doesn't display social icons, etc, when collapsed. But it does allow the sidebar to be expanded / collapsed in much the same way as in the example.

      Reply

Submit a Comment

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