CODEWITHSUNDEEP
csstwitter-bootstrapcss-positiontwitter-bootstrap-3navbar
FrancescoMussi
FrancescoMussi

Reputation: 21610

Bootstrap3: fixed nav on the left

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!

Upvotes: 6

Views: 40479

Answers (3)

Christian.D
Christian.D

Reputation: 949

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.

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362360

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

Upvotes: 1

centurion
centurion

Reputation: 91

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

Upvotes: 1

Related Questions