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.

Answer 2

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

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

Answer 4

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

stickyfloat

Answer 5

I started with Andres' answers and ended up getting a sticky sidebar like this:

HTML:

<div class="span3 sidebar-width">
  <div class="well sidebar-nav-fixed">
    Sidebar
  </div>
</div>

<div class="span9 span-fixed-sidebar">
  Content
</div> <!-- /span -->

CSS:

.sidebar-nav-fixed {
  position:fixed;
}

JS/jQuery:

sidebarwidth = $(".sidebar-width").css('width');
$('.sidebar-nav-fixed').css('width', sidebarwidth);
contentmargin = parseInt(sidebarwidth) + 60;
$('.span-fixed-sidebar').css('marginLeft', contentmargin);

I'm assuming I also need JS to update the 'sidebarwidth' variable when the viewport is resized.

Answer 6

Very easy to get fix nav or everything tag you want. All you need is to write your fix tag like this, and put it in your body section

   <div style="position: fixed">
       test - try  scroll again. 
   </div>

Answer 7

With the current Bootstrap version (3.3.2) there is a nice way to achieve a fixed sidebar for navigation.

This solution also works well with the re-introduced container-fluid class, meaning it is easily possible to have a responsive full-screen layout.

Normally you would need to use fixed widths and margins or the navigation would overlap the content, but with the help of the empty placeholder column the content is always positioned in the right place.

The below setup wraps the content around when you resize the window to less than 768px and releases the fixed navigation.

See http://www.bootply.com/ePvnTy1VII for a working example.

CSS

@media (min-width: 767px) { 
    #navigation{
        position: fixed;
    }
}

HTML

<div class="container-fluid">
 <div class="row">
  <div id="navigation" class="col-lg-2 col-md-3 col-sm-3">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 1</a></li>
    </ul>
  </div>

  <div class="col-lg-2 col-md-3 col-sm-3 hidden-xs">
    <!-- Placeholder - keep empty -->
  </div> 

  <div id="main" class="col-lg-10 col-md-9 col-sm-9 fill">
     ...
     Huge Content
     ...
  </div> 
 </div>
</div>