Bootstrap <div class = "navbar navbar-fixed-top">

Question

I am trying to create a site with Bootstrap. So far, everything is going as planned. I need a fixed navigator and I use the built-in function:

<div class="navbar navbar-fixed-top"> 

This is cool and just what I need BUT, I would like the navigation bar and title bar to run in the same place as the container, and not all the way left / right (still having navigation 100% wide. Tried to put a container inside the navigator that was not the right solution :-)

Answer 1

Example

 <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="brand" href="./index.html">Bootstrap</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"> <a href="./index.html">Home</a> </li> <li> <a href="./getting-started.html">Get started</a> </li> ... <li> <a href="./customize.html">Customize</a> </li> </ul> </div> </div> </div> </div> 

or quit

 .navbar { max-width: 1170px; /* width of .container */ margin: 0 auto; } 

in css

Answer 2

You must have a container class nested inside your navigator

 <div class="navbar navbar-fixed-top"> <div class="container">your menu and logo go here</div> </div> 

This will give you the same width as the body container if you don’t have a mock liquid, and it will auto-label the container so that it is centered in the middle of the screen. It will also keep the navigation bar 100%