How to make the Divi sidebar collapsible and expandable

divi template

Sidebars, despite the rise of mobile browsing, still make sense for visitors viewing your site from a desktop computer or with a screen large enough to see them.

Sidebars are still a great way to add navigation tools, ads and other utilities. We don’t need to get rid of them, but we can make them more practical.

Sidebars have some drawbacks, and one very clear one is that the space they take up makes the content area narrower and, consequently, more complicated to read, requiring more scrolling to see all the content, and then there is also the fact that they can distract the visitor who wants to read your content.

content and sidebar of wordpress

Well, all these inconveniences would be solved if you make it easy for the sidebar to collapse, with a simple click, so that the visitor can concentrate on reading your content, now in full width, and without distractions.

If you use the Divi theme there are 2 ways to offer this functionality.

Make the sidebar collapsible with a little code

Don’t panic, it’s very easy, just copy and paste the following code:

@media only screen and (min-width: 981px) {
/* Button to hide and show sidebar Divi */
#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: '\3>>';
.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar:before,
.et_left_sidebar #db_hide_sidebar:before {
content: '\3<<';
/* Ensure fullwidth formatting matches sidebar formatting */
.db_sidebar_collapsible.et_full_width_page .et_post_meta_wrapper:first-child {
padding-top: 58px !important;
if($('#sidebar').length) {
if ($('body.et_right_sidebar').length) {
$('body').addClass('db_sidebar_collapsible db_right_sidebar_collapsible');
$('<span id="db_hide_sidebar" title="Change sidebar view"></span>').click(function(){
$('body').toggleClass('et_right_sidebar et_full_width_page');
} else if ($('body.et_left_sidebar').length) { 
$('body').addClass('db_sidebar_collapsible db_left_sidebar_collapsible');
$('<span id="db_hide_sidebar" title="Change sidebar view"></span>').click(function(){
$('body').toggleClass('et_left_sidebar et_full_width_page');
</script>Code language: HTML, XML (xml)

Just go to your WordPress web administration and, in Divi Theme OptionsIntegration, activate the option “Enable header code” and, paste the code in the box called “Add code to the <head> of your blog“.

divi integration header code

Save the changes and you have it, now your sidebar will be able to collapse and expand, hide and show if you prefer.

sidebar open
sidebar collapsed

Make the sidebar collapsible with a plugin

If you don’t want to touch the codes, you can apply this same functionality with the Divi Booster plugin.

Among its many customizations and changes for Divi that offers, allows you to activate this feature with a click.

You have it in Sidebar Make the sidebar collapsible.

divi booster setting collapse sidebar

The result is the same, your sidebars can be hidden or shown at will.

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

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

Scroll to Top