Contents
How TO – Collapse Sidebar Step 1) Add HTML: Example
Click on the “hamburger” icon to slide in the side navigation. The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the “page content” – this effect will “highlight” the side navigation.
What do I need for a bootstrap sidebar template?
In all four sidebar templates, that we’ll go through today, we will need Bootstrap 4 CSS and JS files, jQuery library, and our custom stylesheet. Also, I include Font Awesome 5 to be used on the buttons and menu items in one example. Looking for a complete Bootstrap 4 template with a cool Bootstrap sidebar nav?
What should the height of the sidebar be?
As we do not know if the content will vertically fill the entire screen, we will set the minimum height of the sidebar to 100vh. vh is a CSS unit that refers to the viewport height. This means that the initial height of the sidebar will be at least equal to the screen height. Also, its height will increase when the page content would increase.
On the desktops, #sidebar.active will mean that the sidebar is hidden and #sidebar only that it’s visible. It will have an opposite behavior on mobiles where #sidebar.active is when the sidebar is visible and #sidebar is hidden. The .active class has a negative margin-left value that equals to the sidebar width.
It will have an opposite behavior on mobiles where #sidebar.active is when the sidebar is visible and #sidebar is hidden. The .active class has a negative margin-left value that equals to the sidebar width. We’ll use this class later on in the JavaScript part, too.
How to make the drop down menu collapsible in Bootstrap?
Note, that we also added an .active class to the first item to mark that it is the currently active menu item, i.e. the page on the website. To make a drop-down menu collapsible, data-toggle=”collapse” should be added to the link holding the dropdown.