Alex Rivera | Logout

Twitter Bootstrap - full width navbar

Asked 2012-10-26T11:19:49.260
28

Following the example of TB, I have a navbar that is marked up as follows:

<div class="container">
    <div class="navbar">
        <div class="navbar-inner">
                   <!-- nav bar items here -->
        </div>
    </div>
</div>

I'd like this to span the full width of the screen and not have any rounded corners -- similar to static top styling of the navbar.

I can't seem to find how to do this in TB. If there isn't a way, what CSS would I need to override TB and not break responsiveness?

css twitter-bootstrap navbar
Edit
Report

1 Answer

24

Put the navbar out of your container:

<div class="navbar">
    <div class="navbar-inner">
               <!-- nav bar items here -->
     </div>
</div>
<div class="container">

</div>

EDIT:

Here is one that I did with responsive navbar. The code fits the document body:

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

          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          </a>

          <!-- Be sure to leave the brand out there if you want it shown -->
          <a class="brand" href="#">Project name</a>


          <!-- Everything you want hidden at 940px or less, place within here -->
          <div class="nav-collapse">
          <!-- .nav, .navbar-search, .navbar-form, etc -->
          <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
              <li class="divider-vertical"></li>
              <li><a href="#">Link</a></li>
            </ul>
          <ul class="nav pull-right">
            <li><a href="#">Log out</a></li>
          </ul>
          </div>

          </div>
        </div>

    </div>
  <div class="container">
    <div class="row">
      <div class="span12">

      </div>
    </div>


  </div> <!-- end container -
answered 2012-10-26T11:24:09.710

Your Answer