Fixed sidebar navigation in fluid twitter bootstrap 2.0

Question

Is it possible to make sidebar navigation stay always fixed on scroll in fluid layout?

Answer 1

Note: There is a bootstrap jQuery plugin that does this and so much more that was introduced a few versions after this answer was written (almost two years ago) called Affix. This answer only applies if you are using Bootstrap 2.0.4 or lower.

---

Yes, simply create a new fixed class for your sidebar and add an offset class to your content div to make up for the left margin, like so:

CSS

.sidebar-nav-fixed {     padding: 9px 0;     position:fixed;     left:20px;     top:60px;     width:250px; }  .row-fluid > .span-fixed-sidebar {     margin-left: 290px; } 

Demo: http://jsfiddle.net/U8HGz/1/show/ Edit here: http://jsfiddle.net/U8HGz/1/

Update

Fixed my demo to support the responsive bootstrap sheet, now it flows with the responsive feature of the bootstrap.

Note: This demo flows with the top fixed navbar, so both elements become position:static upon screen resize, i placed another demo below that maintains the fixed sidebar until the screen drops for mobile view.

CSS

.sidebar-nav-fixed {      position:fixed;      top:60px;      width:21.97%;  }   @media (max-width: 767px) {      .sidebar-nav-fixed {          width:auto;      }  }   @media (max-width: 979px) {      .sidebar-nav-fixed {          position:static;         width: auto;      }  } 

HTML

<div class="container-fluid"> <div class="row-fluid">  <div class="span3">    <div class="well sidebar-nav sidebar-nav-fixed">     ...    </div><!--/.well -->  </div><!--/span-->  <div class="span9">     ...  </div><!--/span--> </div><!--/row-->  </div><!--/.fluid-container--> 

Demo, edit here.

^{minor note: there is about a 10px/1% difference on the width of the fixed sidebar, its due to the fact that since it doesn't inherit the width from the span3 container div because it is fixed i had to come up with a width. It's close enough.}

And here is another method if you want to keep the sidebar fixed until the grid drops for small screen/mobile view.

CSS

.sidebar-nav-fixed {     position:fixed;     top:60px;     width:21.97%; }  @media (max-width: 767px) {     .sidebar-nav-fixed {         position:static;         width:auto;     } }  @media (max-width: 979px) {     .sidebar-nav-fixed {         top:70px;     } } 

Demo, edit here.