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

2 Comments

  1. Luis Arreaza

    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
    • dan

      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 *