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

Submit a Comment

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