How to collapse the sidebar in Divi?
Well, first you should know that you will have to access some codes on the page to be able to change this option.
You need to manage the following codes to be able to collapse the Sidebar, the first will be to make the bar disappear but at the same time it will only be a button that the user can use to open and close the bar.
Make the sidebar collapsible
@media screen only and (min-KID: 981px) {
/ * Expand / collapse sidebar 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: prime on {
font family: 'ETModules';
font size: 24px;
}
.et_right_sidebar #db_hide_sidebar: prima,
.db_left_sidebar_collapsible.et_full_width_page #db_hide_sidebar: prima di {
content: '39';
}
.db_right_sidebar_collapsible.et_full_width_page #db_hide_sidebar: prima,
.et_left_sidebar #db_hide_sidebar: prima di {
content: '38';
}
/ * Make sure the full-width formatting matches the sidebar formatting * /
.db_sidebar_collapsible.et_full_width_page.et_post_meta_wrapper: primo figlio {
padding-top: 58px! importante;
}
}
jQuery (function ($) {
if ($ ('# sidebar'). length) {
if ($ (‘body.et_right_sidebar’). lunghezza) {
$ (‘body’) addClass (‘db_sidebar_collapsible db_right_sidebar_collapsible’);
$ ('# main content').
$ (‘ ’).click (function () {
$ (‘corpo’) toggleClass (‘et_right_sidebar et_full_width_page’);
$ ('# sidebar'). toggle ();
})
);
$ (‘corpo’) addClass (‘db_collapsible_sidebar’);
} else if ($ (‘body.et_left_sidebar’). lunghezza) {
$ (‘body’) addClass (‘db_sidebar_collapsible db_left_sidebar_collapsible’);
$ ('# main content').
$ (‘ ’).click (function () {
$ (‘corpo’) toggleClass (‘et_left_sidebar et_full_width_page’);
$ ('# sidebar'). toggle ();
})
);
}
}
});
You will only have to copy it and log into WordPress, once there, locate the Divi section and select " Theme options ".
Select the tab " Integration ", Now enable the option" Enable header code ", Continue pasting the code in the section" Add code to of your blog ".
Once you've copied the code, you just need to save your changes and refresh your blog's live page so you can see the change. An arrow will appear next to the sidebar which will allow you to easily open and close the sidebar.
Remove the divider between the content and the sidebar
We leave you a second code with which you can remove the bar that divides the space between the content of blog and the Sidebar.
With this feature, by collapsing the sidebar into Divi, the blog it will be wider when the reader compresses the bar thanks to the arrow you have positioned. The code is as follows:
# main-content.container: before {background: none;}
Now you have to repeat the previous steps, with the only difference that the code must be pasted in the section " Custom CSS “, Save your changes and update your blog's live page.
advice
Many users use their smartphones to access their favorite blogs, so we recommend that you manage the contents in order to facilitate reading. Another way to accomplish this is to add a collapsible menu to your website.
The contents of your blog must be organized, in a way to generate better readability, this helps many people to follow the content you post.
You can add several options to your blog that make it more interactive, such as contact forms or comment sections.
Now we advise you that if you have social networks and have contact with your readers, take their advice into consideration, but maintaining always the essence of your content.
In this way generate engagement with the content you produce, this will keep your blog always full of visits, you can also use the links to some products or pages you recommend and thus monetize your work a little.
An important piece of information that will help you get visits to your blog or website is to use BreadScrumb to improve SEO and attract visitors.
Finally, we hope that our advice and this article will be of great help to you in improving the display of your blog.
