CODEWITHSUNDEEP
twitter-bootstrap
Todd Hayton
Todd Hayton

Reputation: 425

Navbar fixed to top but not full-width

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?

Upvotes: 14

Views: 36373

Answers (5)

LuTz
LuTz

Reputation: 1523

Less for Tommy Nguyen solution. 

.navbar-fixed-width {
  margin-left: auto;
  margin-right: auto;

  @media all and (min-width: @screen-sm-min) {
    width: @screen-sm-min;
  }

  @media all and (min-width: @screen-md-min) {
    width: @screen-md-min;
  }

  @media all and (min-width: @screen-lg-min) {
    width: @screen-lg-min;
  }
}

Upvotes: 0

Tommy Nguyen
Tommy Nguyen

Reputation: 61

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>

Upvotes: 6

Jeremy
Jeremy

Reputation: 3538

Bootstrap 3+ should be able to handle dynamic widths for you if you wrap your navbar in a div with a class of container then widths will be dynamic depending on the available space.

Take a look at Bootstrap css specifically the container section for more details.

Upvotes: 0

Theo
Theo

Reputation: 141

You can use your original markup and simply style (using the class 'navbar' to the width that you need:

.navbar {
width: 50%;
}

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

See tutorial here:

http://www.webdesignforbeginners.info/bootstrap-simple-navbars/

Upvotes: 2

Sara
Sara

Reputation: 8242

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)

Upvotes: 5

Related Questions