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?

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

Solution 2

The latest Boostrap (2.1.0) has a new JS "affix" feature specifically for this type of application, FYI.

Solution 3

this will screw up the responsive Webdesign. Better wrap the fixed sidebar in a media query.

CSS

@media (min-width: 768px) { 
  .sb-fixed{
    position: fixed;
  } 
}

HTML

<div class="span3 sb-fixed">
   <div class="well sidebar-nav">
      <!-- Sidebar Contents -->
   </div>
</div>

Now the sidebar is only fixed, if the viewpot is bigger then 768px.

Solution 4

This isn't possible without javascript. I find affix.js too complex, so I rather use:

stickyfloat

View more solutions