Responsive sidebar navigation using default BS3 navbar markup
Sponsored by Terracoding
Download navbar-fixed-side.scss
Include it after Bootstrap in your Sass file:
@import 'bootstrap'; @import 'navbar-fixed-side'; Download the minified navbar-fixed-side.css
Include it after Bootstrap in your HTML:
<link href="css/bootstrap.min.css" rel="stylesheet" /> <link href="css/navbar-fixed-side.css" rel="stylesheet" /> bower install bootstrap-side-navbar
Position the navbar using the standard Bootstrap grid system in a .container-fluid.
This gives you control over how wide it is and when it should collapse.
Then just use .navbar-fixed-side as you would usually use .navbar-fixed-top.
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-lg-2"> <nav class="navbar navbar-default navbar-fixed-side"> <!-- normal collapsible navbar markup --> </nav> </div> <div class="col-sm-9 col-lg-10"> <!-- your page content --> </div> </div> </div> Use Bootstrap's column ordering to maintain source order
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-lg-2 col-sm-push-9 col-lg-push-10"> <nav class="navbar navbar-default navbar-fixed-side"> <!-- normal collapsable navbar markup --> </nav> </div> <div class="col-sm-9 col-lg-10 col-sm-pull-3 col-lg-pull-2"> <!-- your page content --> </div> </div> </div> The side navbar supports the inverse style for navbars. Replace .navbar-default with .navbar-inverse as normal.