Bootstrap 3 - Fixed Responsive Navbar in container (without background color at the sides)

Question

How to?

Fixed navbar at center, but without background color at the sides.

The width of the navbar should be as that of the container and then the background color of the navbar to the sides of the container (which contains it) you should not see.

Any idea?

Furthermore the navbar must downsize at the resize of the width of the container, and then of the page: so rensponsive navbar!

How to?

Thanks in advance.

Answer 1

Fix the default navbar from: http://getbootstrap.com/examples/navbar/

wrap the navbar in its own .container div and wrap this div in an other div you fix:

#fixme {position: fixed;left: 0;right: 0; top:0;}
/* prevent overlap */
body{padding-top:70px;}

html

<div id="fixme">        
    <div class="container">
         <!-- your navbar here -->
    </div>
</div>

Other example One way to do this (there will be many others). Take static navbar example from: http://getbootstrap.com/examples/navbar-fixed-top/

The navbar code already contains a div with class container which wraps the navbar content and set the width for the different grids (so content is responsive) already.

The 100% width "effect" is set by a background color (and border) of the .navbar-default class (set 100% width by the .navbar-fixed-top left: and right both 0).

Remove this background and border:

.navbar-default {
    background-color:transparent;
    border: none;
}

After this the navbar it self do not have a background color. To solve wrap your nav bar inside a extra div (inside the .containter div) and apply a background color on it:

.navbar > .container > div
{
  background-color: pink;

}

When you apply this background on the .container without the extra div your background will 15px wider then your content on both sides due to the gutter of the grids (padding).

Example: http://bootply.com/79742

html:

 <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">
          <div>
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="../navbar/">Default</a></li>
            <li><a href="../navbar-static-top/">Static top</a></li>
            <li class="active"><a href="./">Fixed top</a></li>
          </ul>
        </div><!--/.nav-collapse -->
        </div>
        </div>
    </div>