off-canvas close

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>
<body>
  <div class="navmenu navmenu-default navmenu-fixed-left offcanvas">
    <a class="navmenu-brand" href="#">Project name</a>
    <ul class="nav navmenu-nav">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu navmenu-nav" id="side-tabs">
          <li role="presentation"><a href="#tab-1" aria-controls="tab-1" role="tab" data-toggle="tab">Tab-1</a></li>
          <li role="presentation"><a href="#tab-2" aria-controls="tab-2" role="tab" data-toggle="tab">Tab-2</a></li>
          <li role="presentation"><a href="#tab-3" aria-controls="tab-3" role="tab" data-toggle="tab">Tab-3</a></li>
          <li role="presentation"><a href="#tab-4" aria-controls="tab-4" role="tab" data-toggle="tab">Tab-4</a></li>
        </ul>
      </li>
    </ul>
    <ul class="nav navmenu-nav">
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>

  <div class="navbar navbar-default navbar-fixed-top">
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div class="container">
    <div class="page-header">
      <h1>Off Canvas Push Menu Template</h1>
    </div>
    <div>

      <!-- Nav tabs -->
     ...

CSS

html,
body {
  height: 100%;
}

body {
  padding: 50px 0 0 0;
}

.navbar-toggle {
  float: left;
  margin-left: 15px;
}

@media (min-width: 0) {
  .navbar-toggle {
    display: block;
    /* force showing the toggle */
  }
}

@media (min-width: 992px) {
  body {
    padding: 0;
  }
  .navbar {
    right: auto;
    background: none;
    border: none;
  }
}

JavaScript

$('#side-tabs a').click(function() {
  $('.navmenu-fixed-left').offcanvas('hide');
});

$('#side-tabs li a').click(function(e) {
  $('#side-tabs li').removeClass('active');

  //get selected href
  var href = $(this).attr('href');

  //set all nav tabs to inactive
  $('#content-tabs li').removeClass('active');

  //get all nav tabs matching the href and set to active
  $('#content-tabs li a[href="' + href + '"]').closest('li').addClass('active');

  //active tab
  $('.tab-pane').removeClass('active');
  $('.tab-pane' + href).addClass('active');
})