Search code examples
htmlcsstwitter-bootstrapfixednavbar

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


I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:

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

This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)


Solution

  • 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 throw

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

    into the css