Navbar fixed to top but not full-width

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 create a navbar-fixed-top or nav-bar-fixed-bottom without having it become full-width and responsive to any screen size .

Step 1: add those css :(I create a css class called: .navbar-fixed-width)

@media all and (min-width: 768px) {
  .navbar-fixed-width {
    width: 768px;
    margin-left: auto;
    margin-right:auto;
 }
}

@media all and (min-width: 992px) {
  .navbar-fixed-width {
    width: 992px;
    margin-left: auto;
    margin-right:auto;
  }

}

@media all and (min-width: 1200px) {
  .navbar-fixed-width {
    width: 1200px;
    margin-left: auto;
    margin-right:auto;
  }
}

step 2: .navbar-fixed-width class to navigation like this.

<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation">
    <div class="container">
         <div class="navbar-header">
         </div>
    </div>
</div>