Bootstrap3: fixed navigator on the left

Question

I am creating a site with boot module 3, and the idea is that the column for navigation is saved on the left side and to the right of the site content:

http://jsbin.com/iQIKUli/3

The position of the navigator should be fixed and without margins on the left and top. I tried with the position: fixed and positional: absolute, but the problem is that the site content overrides the navigation bar.

How can I correctly lock the navigation bar on the left? How can I avoid the content of the site overlapping the navigation bar?

Thank you very much!

Answer 1

I would suggest that you remove the outer container and use "row", since BS 3 no longer has row-fluid .

http://bootply.com/92472

Answer 2

If I understood correctly, you want to put the .navigation class in a new div as follows:

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

And change position: absolute; on position: fixed; in class .navigation

Answer 3

In the current version of Bootstrap (3.3.2), there is a good way to achieve a fixed sidebar for navigation.

This solution also works well with the re-introduced fluid-container class, which means it's easy to get a flexible full-screen layout.

Usually you need to use fixed widths and margins, or the navigation will overlap the content, but using an empty placeholder column, the content will always be in the right place.

The setting below wraps the content when the window is resized to 768 pixels and frees up 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 at fooobar.com/questions/61540 / ....