8

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?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
Eirik H
  • 654
  • 2
  • 8
  • 30
  • See this http://getbootstrap.com/css/#responsive-utilities. – Aleksandr M Apr 10 '14 at 10:33
  • 1
    To allow this to be mobile friendly, it would only require removing `.sidebar` class; the negative offset (`sm-md-offset-2` and for the `sm`) on the main container; thus converting the sidebar into a grid column. It would be for you decide if you want it to appear above or below the main container. – MackieeE Apr 10 '14 at 10:33
  • Thanks, @MackieeE. That would work, post as answer! – Eirik H Apr 10 '14 at 10:46
  • 1
    @eithe I'll just extend upon SW4's =) – MackieeE Apr 10 '14 at 10:56

2 Answers2

10

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;
}
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
4

The CSS for the sidebar at 'larger than' mobile view is specified in:

@media (min-width: 768px)
   .sidebar {
      position: fixed;
      top: 51px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 20px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: #f5f5f5;
      border-right: 1px solid #eee;
   }

After which it reverts to its default of display:none

.sidebar {
   display: none;
}

You would need to either change its default CSS, or add a new media query, e.g.

@media (max-width: 768px)

In order to specifically target smaller devices. The type of styling you wish to apply will depend on what you're after.

SW4
  • 69,876
  • 20
  • 132
  • 137
  • Thanks, what would you recommend? Stack it? Collapse to somewhere? I would prefer collapse, but the main header at the top is already collapsed in the normal location .. – Eirik H Apr 10 '14 at 10:33
  • Its quite subjective, maybe collapse and stack below the main menu..? – SW4 Apr 10 '14 at 10:34
  • An option would be to simply hide it offscreen left, then provide a small grabber handle (similar to how the hamburger menu works for the main nav) to reveal it. When revealed, it slides from offstage left to fill the window and scrolls as needed until dismissed/collapsed by user. – Scott B Aug 30 '16 at 14:58