Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making the Bootstrap dashboard example sidebar visible/available on mobile

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?

like image 731
Eirik H Avatar asked Apr 10 '14 10:04

Eirik H


People also ask

How do I toggle the sidebar in bootstrap?

sidebar-toggle'). click(function(){ $('#sidebar'). removeClass('hidden-xs'); }); If you click the button it toggles the sidebar from the top.

Does bootstrap have sidebar?

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.

How do I change the width of a sidebar in bootstrap?

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 .


Video Answer


1 Answers

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;
}
like image 113
Zim Avatar answered Oct 21 '22 13:10

Zim