Responsive sidebar navigation for Bootstrap 3
Switch branches/tags
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
helpers Initial commit Nov 25, 2015
source Add missing div closing tag to markup examples Jun 27, 2016
.gitignore Initial commit Nov 25, 2015
Gemfile Add icon and license Jan 29, 2016
Gemfile.lock Initial commit Nov 25, 2015
LICENSE Add icon and license Jan 29, 2016
README.md Add missing div closing tag to markup examples Jun 27, 2016
bower.json Resolves #3 - added bower.json file. Apr 29, 2016
config.rb Initial commit Nov 25, 2015

README.md

Icon Side Navbar for Bootstrap 3

Responsive sidebar navigation using default BS3 navbar markup

Sponsored by Terracoding

Check out the demo

Installation

Sass

Download navbar-fixed-side.scss

Include it after Bootstrap in your Sass file:

@import 'bootstrap';
@import 'navbar-fixed-side';

CSS

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

bower install bootstrap-side-navbar


Usage

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.

Examples

Left-hand side

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

Right-hand side

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>

Options

The side navbar supports the inverse style for navbars. Replace .navbar-default with .navbar-inverse as normal.