The Boostrap dashboard example hides the sidebar navigation completely (not collapsed or stacked) when screen width is less than 768px. How would you go about supporting mobile with such a setup?
sidebar-toggle'). click(function(){ $('#sidebar'). removeClass('hidden-xs'); }); If you click the button it toggles the sidebar from the top.
Since Bootstrap 4 nor Bootstrap 3 don't provide any sidebar menu, we will build 5 separate solutions. Each of them will have slightly different features and design, so you can choose one that serves your needs.
The sidebar will have a fixed width of 350 pixels on devices with a minimum screen width of 768px and above. On mobile devices (< 768px ), it will be set to 100% width. To implement the fixed width sidebar on Bootstrap, we need to create 2 new CSS grid styles: col-fluid and col-fixed .
Bootstrap 4
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
Bootstrap 3
Another option is to combine the Dashboard and the "off-canvas" sidebar templates. This layout allows the sidebar to be toggled off/on screen at smaller widths...
http://bootply.com/128936
@media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -33%;
}
.row-offcanvas-left.active {
left: 33%;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 33%;
margin-left: 10px;
}
}
/* Sidebar navigation */
.nav-sidebar {
background-color: #f5f5f5;
margin-right: -15px;
margin-bottom: 20px;
margin-left: -15px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a {
color: #fff;
background-color: #428bca;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With