Bootstrap3: fixed nav on the left

Question

I am setting up a site with bootstrap 3 and the idea is to have a column on the left reserved for the navigation and on the right the content of the site:

http://jsbin.com/iQIKUli/3

The position of the nav should be fixed and without margin on the left and on the top. I have tryied with position:fixed and position:absolute but the problem is that the content of the site override the navbar.

How can i make properly a fixed navbar on the left? How can i avoid that the content of the site override the navbar?

Thank you very much!

score 1 · Answer 1 · answered Nov 07 '13 at 13:58

If I understand right you want to place the .navigation class in a new div like this:

<div class="col-xs-4 col-md-2">
     <div class="navigation">
          <h1>Navigation</h1>
     </div>
</div> <!-- /col-md-2 navigation -->

And change position: absolute; to position: fixed; in your .navigation class

score 1 · Accepted Answer · answered Nov 07 '13 at 14:48

1

I would suggest you remove the outer container, and use 'row' since there is no longer row-fluid in BS 3.

http://bootply.com/92472

answered Nov 07 '13 at 14:48

Carol Skelly

351,302
90
710
624

Thanks i have now resolved it. Can i make you a little question: Why do we set the min-width in wrapper and not in the navigation class? – FrancescoMussi Nov 07 '13 at 15:33
1

Bootstap 'col-xs-*' is completely fluid so it will keep shrinking and eventually collide with your fixed nav... so you have to make the wrapper fixed to prevent this from happening. – Carol Skelly Nov 07 '13 at 15:38
I understand now thank you! If you have time here i made another similar question, about the responsiveness of the content area: http://stackoverflow.com/questions/19840093/bootstrap3-content-responsive – FrancescoMussi Nov 07 '13 at 15:42

score 1 · Answer 3 · edited May 23 '17 at 12:00

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>

See my answer in https://stackoverflow.com/a/28238515/3891027.

Bootstrap3: fixed nav on the left

3 Answers3