Bootstrap offcanvas

When you want to use offcanvas for something other than the main site navigation, it needs to be modified to allow the sidebar to move on and off screen without affecting the header or footer. This example does that without added JS.

by contendia

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<body>

  <nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
      <!-- /.nav-collapse -->
    </div>
    <!-- /.container -->
  </nav>
  <!-- /.navbar -->

  <div class="container-fluid">

    <div id="breadcrumb" class="row">
      <div class="col-xs-12">

        <p>
          <span class="pull-left visible-xs">
        <button type="button" id="btn-offcanvas" class="btn btn-primary btn-xs" data-toggle="offcanvas" data-target=".offcanvas-xs" data-canvas="row-offcanvas">Refine</button>
      </span> You / are / here:
        </p>
      </div>
    </div>

    <div class="row row-offcanvas row-offcanvas-left">
      <div id="left-column" class="col-xs-3 col-md-2 sidebar-offcanvas">
        <p>
          This is the sidebar.
        </p>
        <p>
          It is longer than the main content area.
        </p>
        <p>
          So it should push the footer down when it opens.
        </p>
      </div>
      <div class="col-xs-12 col-sm-9 col-md-10">
        This is the main content
      </div>
    </div>

    <div id="footer" class="row">
      <div class="col-xs-12">
        &copy; 2016 This is the footer
      </div>
 ...

CSS

/* -------------------------- 
    Standard offcanvass.css 
---------------------------- */


/*
 * Style tweaks
 * --------------------------------------------------
 */

html,
body {
  overflow-x: hidden;
  /* Prevent scroll on narrow devices */
}

body {
  padding-top: 70px;
}

footer {
  padding: 30px 0;
}


/*
 * Off Canvas
 * --------------------------------------------------
 */

@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
    -o-transition: all .25s ease-out;
    transition: all .25s ease-out;
  }
  .row-offcanvas-right {
    right: 0;
  }
  .row-offcanvas-left {
    left: 0;
  }
  .row-offcanvas-right .sidebar-offcanvas {
    right: -50%;
    /* 6 columns */
  }
  .row-offcanvas-left .sidebar-offcanvas {
    left: -50%;
    /* 6 columns */
  }
  .row-offcanvas-right.active {
    right: 50%;
    /* 6 columns */
  }
  .row-offcanvas-left.active {
    left: 50%;
    /* 6 columns */
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%;
    /* 6 columns */
  }
}


/* ---------------------------------- 
    Custom offcanvas tweaks 
 ----------------------------------- */

@media (max-width: 767px) {
  .sidebar-offcanvas {
   width: 200px;
  }
  .row-offcanvas-left.active {
    left: 200px;
  }
  #btn-offcanvas {
    margin-right: 10px;
  }
  #btn-offcanvas:before {
    font-family: 'Glyphicons Halflings';
    content: "\e251";
    padding-right: 5px;
    vertical-align: top;
  }
  #btn-offcanvas.active:before {
    content: "\e252";
  }
  .row-offcanvas-left .sidebar-offcanvas {
    position: static !important;
    width: 200px;
    margin-left: -200px;
    overflow: hidden;
    height: 0;
  }
  .row-offcanvas-left.active .sidebar-offcanvas {
    height: auto;
  }
}


/* ---------------------------------  
    Other stuff 
 ---------------------------------- */

#breadcrumb {
  font-weight: bold;
}

#footer.row {
  background-color: #333;
  color: #fff;
 ...

JavaScript

$(document).ready(function() {
  $('[data-toggle="offcanvas"]').click(function() {
    $('.row-offcanvas').toggleClass('active');
    $(this).toggleClass('active'); // <- added this line for feedback on the button
  });
});