Make the Divi Sidebar Collapsible

Written by Dan Mossop

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:
<style>

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

	/* Sidebar expand / collapse button */
	#db_hide_sidebar {
		z-index: 10000;
		padding: 10px;
		cursor: pointer;
	}
	.db_right_sidebar_collapsible #db_hide_sidebar {
		right: 0;
	}
	.db_left_sidebar_collapsible #db_hide_sidebar {
		left: 0;
	}
	.et_fixed_nav #db_hide_sidebar {	
		position: fixed; 
	}
	.et_non_fixed_nav #db_hide_sidebar {	
		position: absolute; 
	}
	#db_hide_sidebar:before {
		font-family: 'ETModules';
		font-size: 24px;
	}
	.et_right_sidebar #db_hide_sidebar:before,
	.db_left_sidebar_collapsible.et_full_width_page #db_hide_sidebar:before {
		content: '\39';
	}
	.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar:before,
	.et_left_sidebar #db_hide_sidebar:before {
		content: '\38';
	}

	/* Ensure fullwidth formatting matches sidebar formatting */
	.db_sidebar_collapsible.et_full_width_page .et_post_meta_wrapper:first-child {
		padding-top: 58px !important;
	}
}

</style>

<script>
jQuery(function($){
	if($('#sidebar').length) {
		if ($('body.et_right_sidebar').length) {
			$('body').addClass('db_sidebar_collapsible db_right_sidebar_collapsible');
			$('#main-content').prepend(
				$('<span id="db_hide_sidebar" title="Toggle Sidebar"></span>').click(function(){
					$('body').toggleClass('et_right_sidebar et_full_width_page');
					$('#sidebar').toggle();
				})
			);
			$('body').addClass('db_collapsible_sidebar');
		} else if ($('body.et_left_sidebar').length) { 
			$('body').addClass('db_sidebar_collapsible db_left_sidebar_collapsible');
			$('#main-content').prepend(
				$('<span id="db_hide_sidebar" title="Toggle Sidebar"></span>').click(function(){
					$('body').toggleClass('et_left_sidebar et_full_width_page');
					$('#sidebar').toggle();
				})
			);
		}
	}
});
</script>
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.

Streamline Your Divi Workflow!

Copying images and content directly from your clipboard into Divi has never been easier. Say goodbye to the cumbersome save-and-upload routine and hello to streamlined efficiency.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

15 Comments

  1. Hey Dan,

    I have moved my sidebar from right to the left. How can I move the expand/collapse button to the left on your code?

    Thank You!

    Reply
    • Hi Bekh, the code should work with the sidebar whichever side it's on. I've just tested and it works on my test site with a left sidebar. If it's not working for you, is there any chance you're able to send through a link to the site / page you're working on so that I can take a look? Thanks!

      Reply
  2. I'm a developer and bought Divi Booster to use on several sites. I find it really helpful.

    One option I'd love for you to add is the ability to hide the sidebar on all pages. Granular control (hide on pages, blog posts, etc) would be nice, but I would be OK with an all pages only option.

    I know I can (and have) used CSS to do this, but it would be great to just have it as a simple toggle in your plugin.

    Thanks!

    Reply
    • Hey John, thanks for the suggestion. I've put it on my feature list and will let you know if I'm able to implement it. An alternative way you might be able to achieve a similar effect would be to create a "sidebar-less" template (either one with no sidebar, or with the CSS to hide the sidebar) in the Divi Theme Builder and then use the template settings to assign that template to parts of your site in the granular way you describe. Cheers!

      Reply
  3. 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
  4. 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
  5. 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
  6. 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

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest From Divi Booster

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Fix Divi Text Module "Regular" Font Weight Not Working

Are you encountering an issue where the font weights in Divi's Text Module don't seem to apply as expected? In particular, you might find that when you set the text module's body text font weight to "Regular", your font is actually assigned a weight of 500 instead of...

Make the Divi Gallery Module Swipeable

The Divi Gallery Module comes with a slider mode that lets you display images in a slider with clickable left/right arrows to scroll through the images. For mobile / touchscreen users, you can improve the user experience by allowing your user to swipe to navigate to...

How to Use Divi Dynamic Content in Woo Modules Product Selector

Divi's Dynamic Content is a powerful feature that lets you populate your Divi modules and theme builder templates with data pulled in various sources, such as custom fields. This allows for efficient organization and maintenance of your sites.Unfortunately, Divi's...

Random Divi Posts