Question

Using the 2.1.1 Twitter Bootstrap, I’m trying to create a navbar that is fixed to the top of the page but which is not full width:

<div class="container">
  <div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
  </div>
</div>

If I remove the navbar-fixed-top class:

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

to

  <div class="navbar">

then the navbar ends up looking the way I’d like it to – only 940px wide instead of full-width – but then of course it is no longer fixed to the top of the page. How can I keep this navbar fixed to the top of the page without having it become full-width?

Answer 1

You can override Bootstrap’s positioning by setting it to fixed – use absolute if you don’t want it to scroll with the page:

.navbar {
    position: fixed !important;
    top: 0px;
    width: 940px;
}

(consider giving it an ID if you plan on using multiple navbars)