jquery - Jasny offcanvas menu -

i'm using bootstrap jasny bootstrap (http://www.jasny.net/bootstrap/). trying create navbar, off canvas menu 1 on android page http://www.android.com/switch/. jasny menu closest 1 one: http://www.jasny.net/bootstrap/examples/navmenu/.

the problem face off canvas visible (fixed) when screen larger 992px , navbar hidden. android website want navbar present toggle button, , when toggle button clicked (on screen sizes) off canvas menu appears (just when screen size less 992px). how can have navbar , off canvas working on smaller screen sizes @ times?

thanks lot in advance!

this should started.

$(document).ready(function() {    var open = false;      var opensidebar = function() {      $('.side-collapse').addclass('open-side');      $('.navbar-toggle').addclass('open-side');      $('#navbar-toggle').addclass('open-side');      open = true;    }      var closesidebar = function() {      $('.side-collapse').removeclass('open-side');      $('.navbar-toggle').removeclass('open-side');      $('#navbar-toggle').removeclass('open-side');      open = false;    }      $('.navbar-toggle').click(function(event) {      event.stoppropagation();      var toggle = open ? closesidebar : opensidebar;      toggle();    });      $(document).click(function(event) {      if (!$(event.target).closest('.side-collapse').length) {        closesidebar();      }    });  });

body {    padding-top: 60px;  }  .navbar.navbar-custom {    background: #fff;    border: none;  }  .navbar-custom .navbar-toggle {    border: none;    float: left;  }  .navbar-custom .navbar-header .navbar-toggle:hover,  .navbar-custom .navbar-header .navbar-toggle:focus,  .navbar-custom .navbar-header .navbar-toggle:active {    border-radius: 0;    background: #6ab344;    color: #fff;    -webkit-transition: 0.3s ease-in-out;    -moz-transition: 0.3s ease-in-out;    -o-transition: 0.3s ease-in-out;    transition: 0.3s ease-in-out;  }  .navbar-custom .navbar-nav > li:first-child {    background: #6ab344;    font-size: 25px;    font-weight: 600;  }  .navbar-custom .navbar-nav > li:first-child {    color: #fff;  }  .navbar-custom .navbar-nav > li,  .navbar-custom .navbar-nav > li > {    -webkit-transition: 0.3s ease-in-out;    -moz-transition: 0.3s ease-in-out;    -o-transition: 0.3s ease-in-out;    transition: 0.3s ease-in-out;  }  .navbar-custom .navbar-nav > li:hover {    background: #a3d48a;  }  .navbar-custom .navbar-nav > li > a:hover {    border-right: 6px solid #6ab344;    color: #fff;  }  .navbar-custom .side-collapse {    background: #fff;    border-right: 2px solid #f5f5f5;    top: 50px;    bottom: 0;    left: -256px;    width: 256px;    position: fixed;    overflow: hidden;    -webkit-transition: 0.4s cubic-bezier(1, .25, .005, 1.1);    transition: 0.4s cubic-bezier(1, .25, .005, 1.1);  }  .navbar-custom .side-collapse.open-side {    left: 0;  }  .alert.alert-success-alert {    background: #6ab344;    color: #fff;    border-radius: 0;  }  .alert-success-alert button.close {    color: #fff !important;  }  @media (min-width: 767px) {    .navbar-custom .side-collapse {      top: 0px;    }    .navbar-custom .navbar-toggle {      display: block;    }    .navbar-custom .side-collapse .navbar-nav > li > {      width: 256px;      display: block;    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <nav class="navbar navbar-default navbar-fixed-top navbar-custom">    <div class="container-fluid">      <div class="navbar-header" id="navbar-toggle">        <button type="button" class="navbar-toggle"><span class="sr-only">toggle navigation</span>  <span class="glyphicon glyphicon-align-right"></span>          </button><a class="navbar-brand" href="#">bootstrap</a>        </div>      <div class="navbar-default side-collapse">        <nav role="navigation" class="navbar-collapse">          <ul class="nav navbar-nav">            <li><a href="#">bootstrap <span class="sr-only">(current)</span></a>             </li>            <li><a href="#">about</a>             </li>            <li><a href="#">services</a>             </li>            <li><a href="#">news</a>             </li>            <li><a href="#">contact</a>             </li>          </ul>        </nav>      </div>    </div>  </nav>  <div class="container">    <div class="alert alert-success-alert alert-dismissible" role="alert">      <button type="button" class="close" data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span>        </button> <strong>warning!</strong> off-canvas mobile menu</div>    <dl> <dt>bootstrap...</dt>        <dd>al contrario del pensamiento popular, el texto de lorem ipsum no es simplemente texto aleatorio. tiene sus raices en una pieza cl´sica de la literatura del latin, que data del año 45 antes de cristo, haciendo que este adquiera mas de 2000 años de        antiguedad. richard mcclintock, un profesor de latin de la universidad de hampden-sydney en virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de lorem ipsum, y al seguir leyendo distintos textos        del latín, descubrió la fuente indudable. lorem ipsum viene de las secciones 1.10.32 y 1.10.33 de "de finnibus bonorum et malorum" (los extremos del bien y el mal) por c icero, escrito en el año 45 antes de cristo. este libro es un tratado de teoría        de éticas, muy popular durante el renacimiento. la primera linea del lorem ipsum, "lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>    </dl>    <dl> <dt>bootstrap...</dt>        <dd>al contrario del pensamiento popular, el texto de lorem ipsum no es simplemente texto aleatorio. tiene sus raices en una pieza cl´sica de la literatura del latin, que data del año 45 antes de cristo, haciendo que este adquiera mas de 2000 años de        antiguedad. richard mcclintock, un profesor de latin de la universidad de hampden-sydney en virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de lorem ipsum, y al seguir leyendo distintos textos        del latín, descubrió la fuente indudable. lorem ipsum viene de las secciones 1.10.32 y 1.10.33 de "de finnibus bonorum et malorum" (los extremos del bien y el mal) por c icero, escrito en el año 45 antes de cristo. este libro es un tratado de teoría        de éticas, muy popular durante el renacimiento. la primera linea del lorem ipsum, "lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>    </dl>    <dl> <dt>bootstrap...</dt>        <dd>al contrario del pensamiento popular, el texto de lorem ipsum no es simplemente texto aleatorio. tiene sus raices en una pieza cl´sica de la literatura del latin, que data del año 45 antes de cristo, haciendo que este adquiera mas de 2000 años de        antiguedad. richard mcclintock, un profesor de latin de la universidad de hampden-sydney en virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de lorem ipsum, y al seguir leyendo distintos textos        del latín, descubrió la fuente indudable. lorem ipsum viene de las secciones 1.10.32 y 1.10.33 de "de finnibus bonorum et malorum" (los extremos del bien y el mal) por c icero, escrito en el año 45 antes de cristo. este libro es un tratado de teoría        de éticas, muy popular durante el renacimiento. la primera linea del lorem ipsum, "lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>    </dl>    <dl> <dt>bootstrap...</dt>        <dd>al contrario del pensamiento popular, el texto de lorem ipsum no es simplemente texto aleatorio. tiene sus raices en una pieza cl´sica de la literatura del latin, que data del año 45 antes de cristo, haciendo que este adquiera mas de 2000 años de        antiguedad. richard mcclintock, un profesor de latin de la universidad de hampden-sydney en virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de lorem ipsum, y al seguir leyendo distintos textos        del latín, descubrió la fuente indudable. lorem ipsum viene de las secciones 1.10.32 y 1.10.33 de "de finnibus bonorum et malorum" (los extremos del bien y el mal) por c icero, escrito en el año 45 antes de cristo. este libro es un tratado de teoría        de éticas, muy popular durante el renacimiento. la primera linea del lorem ipsum, "lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>    </dl>    <dl> <dt>bootstrap...</dt>        <dd>al contrario del pensamiento popular, el texto de lorem ipsum no es simplemente texto aleatorio. tiene sus raices en una pieza cl´sica de la literatura del latin, que data del año 45 antes de cristo, haciendo que este adquiera mas de 2000 años de        antiguedad. richard mcclintock, un profesor de latin de la universidad de hampden-sydney en virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de lorem ipsum, y al seguir leyendo distintos textos        del latín, descubrió la fuente indudable. lorem ipsum viene de las secciones 1.10.32 y 1.10.33 de "de finnibus bonorum et malorum" (los extremos del bien y el mal) por c icero, escrito en el año 45 antes de cristo. este libro es un tratado de teoría        de éticas, muy popular durante el renacimiento. la primera linea del lorem ipsum, "lorem ipsum dolor sit amet..", viene de una linea en la sección 1.10.32...</dd>    </dl>  </div>