Make the Divi Sidebar Collapsible

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

Make the Divi Sidebar Collapsible

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Manually adding the Collapsing Sidebar

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

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

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

Adding the Collapsing Sidebar using Divi Booster

Note: You can adjust the values width, margin and height in the code to fit your needs.

I hope this tutorial will help you to make your Divi blog look better, good luck!

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 *