PLEASE NOTE: The examples given here depend upon and cannot replace Twitter Bootstrap's own excellent documentation.

Page contents:


Navbar Fixed-Top see example at top of this page

The standard navbar that you see above and in Twitter Bootstrap's own examples and documentation.


Static Navbar Full-Width stays static positioned where you put it in the page

Notes & Code

To make a navbar that's positioned static within a page, yet still full-width:

  1. Remove class "navbar-fixed-top" from div class "navbar".
  2. Customize the styles on div class "navbar-inner" to remove rounded corners
  3. It depends ...
    • If you're using Bootstrap 2.02 --> you'll need to modify a line in bootstrap.css. (See code example.)
    • If you're using Bootstrap 2.0 or 2.01 --> you should be good to go!

HTML

No fixed-top positioning and remove the rounded corners:

<div class="navbar">
  <div class="navbar-inner" style="-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;">
    <div class="container">
      <!-- ... and so on ... -->

Custom stylesheet?

Of course those inline styles on navbar-inner are ugly, and so you may prefer to add the following to your custom stylesheet:

.navbar-inner {	
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

Using version 2.02?

You'll need to modify one line in the CSS:

bootstrap.css line 2801

Currently reads:

.navbar .container {
  width: auto;
}

Change the selector so that it reads as follows:

.container .navbar .container {
  width: auto;
}

Static Navbar Inside Container constrained to the width of your site contents

Notes

For this application:

  1. Nest the entire nav within a div class "container".
  2. Remove class "navbar-fixed-top" from div class "navbar".
  3. The third step depends ...
    • If you are using Bootstrap 2.02 --> That's it. You're set!
    • If you are using Bootstrap 2.0 or 2.01 --> Add style="width:auto" to the div class "container" within the navbar. (Without it, pull-right elements bleed over the right edge.)

HTML

The following is sufficient for Bootstrap 2.02:

<div class="container">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <!-- ... and so on ... -->

Using Bootstrap 2.0 or 2.01?

You'll need to add "width: auto" to the internal div class "container", like so:

<div class="container">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container" style="width: auto">
        <!-- ... and so on ... -->

Custom stylesheet?

Alternatively, you may remove the inline style and add the following to a custom stylesheet:

.container .navbar .container { 
  width: auto;
}