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.
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.
Table of Contents
Make the sidebar collapsible with a little code
Don’t panic, it’s very easy, just copy and paste the following code:
<style>
@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;
}
}
</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="Change sidebar view"></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="Change sidebar view"></span>').click(function(){
$('body').toggleClass('et_left_sidebar et_full_width_page');
$('#sidebar').toggle();
})
);
}
}
});
</script>Code language: HTML, XML (xml)Just go to your WordPress web administration and, in Divi → Theme Options → Integration, activate the option “Enable header code” and, paste the code in the box called “Add code to the <head> of your blog“.
Save the changes and you have it, now your sidebar will be able to collapse and expand, hide and show if you prefer.
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.
The result is the same, your sidebars can be hidden or shown at will.
