PLEASE NOTE: The examples given here depend upon and cannot replace Twitter Bootstrap's own excellent documentation.
The standard navbar that you see above and in Twitter Bootstrap's own examples and documentation.
To make a navbar that's positioned static within a page, yet still full-width:
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 ... -->
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; }
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; }
For this application:
The following is sufficient for Bootstrap 2.02:
<div class="container"> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <!-- ... and so on ... -->
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 ... -->
Alternatively, you may remove the inline style and add the following to a custom stylesheet:
.container .navbar .container { width: auto; }