CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
Swarup
Swarup

Reputation: 176

Create sticky side navbar in Bootstrap 3.0

I want to create Sticky Side Navbar on Left side in My Web Site. & I'm Using Bootstrap 3 RC2. I don't know How to create it.

Upvotes: 12

Views: 56880

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362320

You need to define the CSS for when the sidebar becomes fixed...

For example,

#sidebar.affix {
    position: fixed;
    top:25px;
    width:228px;
  }

Here is a working example: http://bootply.com/73864

Upvotes: 11

Jeremy Lynch
Jeremy Lynch

Reputation: 7210

The sticky navbar you are refereing to is possible thanks to the affix plugin. You can view the bootstrap documentation on this.

This Jsfiddle contains a working sticky sidebar (make the result window larger to see it work properly). Read on to create the same sidebar.

1. Create html for your sidebar. For this example we will use bootstraps nav-pills within a well. 

<div class="row">
  <div class="col-sm-3">
    <div class="well bs-sidebar affix" id="sidebar">
      <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </div> <!--well bs-sidebar affix-->
  </div> <!--col-sm-3-->
  <div class="col-sm-9">
    <p>Main body content goes here</p>
  </div> <!--col-sm-9-->
</div> <!--row-->

2. Invoke the affix plugin in your js file

$('#sidebar').affix({
  offset: {
    top: $('header').height()
  }
});

You need to replace 'header' with whatever will be above the the sidebar. If you are using a bootstrap navbar and it is directly above the sidebar, replace 'header' with the class you are using for the navbar, for example: 

top: $('.navbar navbar-default').height()

3. Add css for affix class

CSS for non-responsive layout

.bs-sidebar.affix {
  width: 263px;
  top: 25px;
}

CSS for responsive layout

@media (min-width: 768px) {
  .bs-sidebar.affix {
    width: 158px;
    top: 25px;
  }
}

@media (min-width: 992px) {
  .bs-sidebar.affix {
    width: 213px;
    position: fixed;
    top: 25px;
  }
}

@media (min-width: 1200px) {
  .bs-sidebar.affix {
    width: 263px;
  }
}

Upvotes: 8

Bass Jobsen
Bass Jobsen

Reputation: 49044

The default Navbar of Twitter's Bootstrap 3 is horizontal. There are four types of it, default, static top and fixed top and bottom, see the example section of this page: http://getbootstrap.com/getting-started

But of course you can use Twitter's Bootstrap 3 to build a (left)side navigation. Please first read the Docs, it contain many examples. Make a sketch of you idea, try to code it with the examples. Ask questions here for troubleshooting of your code. Start at the affix (http://getbootstrap.com/javascript/#affix) and the nav section (http://getbootstrap.com/components/#nav) first maybe.

Maybe also check: how to make bootstrap off canvas nav overlap content instead of move it

Upvotes: 1

Related Questions