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 pr

Answer 1

Here is the full example

$(document).ready(function() {
  $('#slide-nav.navbar-inverse').after($('
'));
  $('#slide-nav.navbar-default').after($('
'));

  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
  }
}

  

    

      
        Toggle navigation
        
        
        
      
      Project name
    
    

      

        
Menu
        
        
Menu
        
        
Menu
        

      

    
  


  

    
Left Sidebar menu
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid sunt minus libero quas soluta blanditiis voluptatibus, eveniet sint tempora! Maxime!
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad laudantium deleniti ratione ea voluptas, dolore expedita nisi? Veniam, doloremque, reiciendis.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci blanditiis nam esse molestiae voluptatem maiores fugiat nulla commodi magni impedit.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ducimus iure ipsa ea officia aliquid quibusdam nostrum obcaecati itaque temporibus!