How to slide nav bar from left instead from top?

Question

Bootstrap supports toggling a navbar from the top. How can I slide it from the left when the screen-size is small?

For example:

In the screenshot provided above, when the screen is re-sized, the navbar is toggled and slides down from the top. I rather want that the navbar should slide from the left. How can I achieve this function in Bootstrap?

Currently, as per code, the navbar slides from the top. Here is my code:

<nav class="navbar navbar-site navbar-default" role="navigation">     <div class="container">         <div class="navbar-header">             <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>             <a href="{% url 'index' %} " class="navbar-brand logo logo-title">             <span class="logo-icon"><i class="icon icon-search-1 ln-shadow-logo shape-0"></i> </span> <span>Companyname </span> </a>          </div>         <div class="navbar-collapse collapse">             <ul class="nav navbar-nav navbar-right">                 {% if user.is_authenticated %}                     <li class="dropdown">                         <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span>{{user.first_name}}</span> <i class="icon-user fa"></i> <i class=" icon-down-open-big fa"></i></a>                         <ul class="dropdown-menu user-menu">                             <li class="active"><a href="account-home.html"><i class="icon-home"></i> Personal Home </a></li>                             <li><a href="statements.html"><i class=" icon-money "></i> Payment history </a></li>                             <li><a href="{% url 'logout' %}"> <i class="glyphicon glyphicon-off"></i> Signout </a></li>                         </ul>                     </li>                 {% else %}                     <li><a href="{% url 'login' %}">Login</a></li>                     <li><a href="{% url 'signup' %}">Signup</a></li>                 {% endif %}                 <li class="postadd"><a class="btn btn-block btn-border btn-post btn-danger" href="{% url 'post_ad' %}">Post Free Add</a></li>             </ul>         </div>     </div> </nav> 

Answer 1

Easy. Change the default behavior from

<button ... data-toggle="collapse" data-target="#my-navbar-collapse"> 

to slide-collapse functionality which we are going to implement now

<button ... data-toggle="slide-collapse" data-target="#my-navbar-collapse"> 

Where the menu is contained within div that has the id my-navbar-collapse. Note that using id instead of class selector will improve the accessibility because bootstrap will append ARIA states (expanded/collapsed) to the menu automatically.

<div id="my-navbar-collapse" class="collapse navbar-collapse">     <ul class="nav navbar-nav">         ...     </ul> </div> 

Class .collapse in bootstrap ensures the menu to be initially hidden.

---

The code:

And then paste the following Javascript somewhere in the footer:

// mobile menu slide from the left $('[data-toggle="slide-collapse"]').on('click', function() {     $navMenuCont = $($(this).data('target'));     $navMenuCont.animate({'width':'toggle'}, 350); }); 

And the following CSS properties:

#my-navbar-collapse {     position: fixed;     top: 0;     left: 0;     z-index: 1;     width: 280px; /*example + never use min-width with this solution */     height: 100%; } 

Some hints:

• Good idea is also to make responsive query where menu width would be 100% for smartphones instead of always 280px. It works like a charm.
• If you have horizontal menu for desktops, and slider only for smaller devices, you can easily take advantage of @grid-float-breakpoint and @grid-float-breakpoint-max Bootstrap LESS variables

Answer 2

Here is the full example

$(document).ready(function() {    $('#slide-nav.navbar-inverse').after($('<div class="inverse" id="navbar-height-col"></div>'));    $('#slide-nav.navbar-default').after($('<div id="navbar-height-col"></div>'));      var slidewidth = '20%';    var navbarneg = '-' + slidewidth;      if ($(window).width() < 767) {      $('#navbar-height-col').css("width", slidewidth);      $('#navbar-height-col').css("left", navbarneg);      $('#slide-nav #slidemenu').css("width", slidewidth);      $('#slide-nav #slidemenu').css("left", navbarneg);    }      $("#slide-nav").on("click", '.navbar-toggle', function(e) {        // slider is active      var selected = $(this).hasClass('slide-active');        // set slidemenu width      $('#slidemenu').stop().animate({        left: selected ? navbarneg : '0px'      });        // set navbar width      $('#navbar-height-col').stop().animate({        left: selected ? navbarneg : '0px'      });        // set content let      $('#page-content').stop().animate({        left: selected ? '0px' : slidewidth      });        // set navbar left      $('.navbar-header').stop().animate({        left: selected ? '0px' : slidewidth      });        $(this).toggleClass('slide-active', !selected);      $('#slidemenu').toggleClass('slide-active');        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');    });      var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';      $(window).on("resize", function() {      if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {        $(selected).removeClass('slide-active');      }    });  });

body.slide-active {    overflow-x: hidden  }  #page-content {    position: relative;    padding-top: 70px;    left: 0;  }  #page-content.slide-active {    padding-top: 0  }  #slide-nav .navbar-toggle {    cursor: pointer;    position: relative;    line-height: 0;    float: left;    margin: 0;    width: 30px;    height: 40px;    padding: 17px 0 0 0;    border: 0;    background: transparent;  }  #slide-nav .navbar-toggle.slide-active .icon-bar {    background: #CC0F0F;    color: #CC0F0F;  }  .navbar-header {    position: relative  }  .navbar.navbar-fixed-top.slide-active {    position: relative  }  @media (max-width: 767px) {    #slide-nav .container {      margin: 0!important;      padding: 0!important;      height: 100%;    }    #slide-nav .navbar-header {      margin: 0 auto;      padding: 0 15px;    }    #slide-nav .navbar.slide-active {      position: absolute;      width: 80%;      top: -1px;      z-index: 1000;    }    #slide-nav #slidemenu {      background: #f7f7f7;      left: -100%;      min-width: 0;      position: absolute;      padding-left: 0;      z-index: 2;      top: -8px;      margin: 0;    }    #slide-nav #slidemenu .navbar-nav {      min-width: 0;      width: 100%;      margin: 0;    }    #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {      min-width: 0;      width: 80%;      white-space: normal;    }    #slide-nav {      border-top: 0    }    #slide-nav.navbar-inverse #slidemenu {      background: #333    }    #navbar-height-col {      position: fixed;      top: 0;      height: 100%;      bottom: 0;      background: #f7f7f7;    }    #navbar-height-col.inverse {      background: #333;      z-index: 1;      border: 0;    }    #slide-nav .navbar-form {      width: 100%;      margin: 8px 0;      text-align: center;      overflow: hidden;      /*fast clearfixer*/    }    #slide-nav .navbar-form .form-control {      text-align: center    }    #slide-nav .navbar-form .btn {      width: 100%    }  }  @media (min-width: 768px) {    #page-content {      left: 0!important    }    .navbar.navbar-fixed-top.slide-active {      position: fixed    }    .navbar-header {      left: 0!important    }  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="slide-nav">    <div class="container">      <div class="navbar-header">        <a class="navbar-toggle">          <span class="sr-only">Toggle navigation</span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>          <span class="icon-bar"></span>        </a>        <a class="navbar-brand" href="#">Project name</a>      </div>      <div id="slidemenu">        <ul class="nav navbar-nav">          <li class="active"><a href="#">Menu</a>          </li>          <li><a href="#">Menu</a>          </li>          <li><a href="#">Menu</a>          </li>          </ul>        </div>    </div>  </div>  <div id="page-content">    <div class="container">      <h1 class="no-margin-top">Left Sidebar menu</h1>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.</p>      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!</p>    </div>  </div>