floating navbar width as scroll

Question

I have a navbar that floats down as the page scrolls down. What I am trying to do is have the width of navbar the same as <div class="jumbotron"> So that they match up nicely on all types of devices. I have tried and researched so many things but it does not want to work when the size gets smaller. If the page is open on a monitor everything is fitting correctly but the problem I am having is when I try to shrink the pace the Navbar is supposed to start collapsing making it easier on a mobile device. I am just trying to have them line up nicely. Any help with this would be greatly appreciated!

http://jsfiddle.net/ncnzwqxv/

CSS

@media (min-width: 768px) { 

.navbar-collapse ul {
    margin-top: 7px; 
} 
}   


.navbar-collapse .navbar-nav.navbar-left:first-child { 
    margin-left: 0px; 
}


.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    background-color:#FFF;
    border-color: #FFF;
    color: #000;
}

.nav-pills {
    margin-bottom:7px;
    padding-right:30px;
    font-weight:bold;
}

.dropdown-menu > li > a {   
    color: #428BCA;
    font-weight:bold;
}

.navbar {
    position:fixed;
    top:0;
}

.navbar-default .navbar-collapse{
    display:inline-block !important;
}

.navbar-collapse{
    float:right !important;
}

.container {
    margin-top:100px;
}

#test{
    width:1140px;
}

body {
    background-color:#FFF;
}

HTML

<div class="container">

    <!-- Static navbar -->
      <div id="test" class="navbar navbar-default">
      <div class="navbar-header">
       <a class="navbar-brand" rel="home" href="#"><img src="http://dummyimage.com/44x20/000/fff&amp;text=logo"></a> 
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-right nav-pills">
                <li role="presentation" class="active"><a href="./">Link</a></li>
                <li role="presentation"><a href="../navbar-fixed-top/">Link</a></li>
                    <li role="presentation" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Link<span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="../navbar-fixed-top/">Link 1></li>
                            <li><a href="../navbar-fixed-top/">Link 2</a></li>
                        </ul>
                <li role="presentation"><a href="../navbar-static-top/">Getting Started</a></li>
            </ul>
        </div><!--/.nav-collapse -->
      </div>

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs »</a>
        </p>
      </div>

      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs »</a>
        </p>
      </div>

      <div class="jumbotron">
        <h1>Navbar example</h1>
        <p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../../components/#navbar">View navbar docs »</a>
        </p>
      </div>

</div> <!-- /container -->

Answer 1

See http://jsfiddle.net/gilla/ncnzwqxv/6/

You can get around this by using containers on the separate elements rather than wrapping them.

Also, give your navbar a wrapper to do the fixed positioning.

[HTML] add container class to navbar

<div class="wrapper">
  <div id="test" class="container navbar navbar-default">
  <div class="navbar-header">
    .............

[CSS] wrapper style rules for fixed positioning

.wrapper {
    left: 0;
    position:fixed;
    right: 0;
    top:0;
}

[HTML] add container class to jumbtrons

  <div class="jumbotron container first">
    <h1>Navbar example</h1>
    <p>This example is a quick ex..........

On a side note, I removed the fixed width on the navbar and the following rule was causing your navbar to not collapse...

[CSS] removed

.navbar-default .navbar-collapse{
    display:inline-block !important;
}

#test{
   width:1140px;
}

Answer 2

You could scale your navbar directly to the same dimensions that the container class generally scales down using the default media queries in Bootstrap. But I think there is something else funky going on with your markup. I can't quite put my finger on it.

@media (min-width: 1200px) {
    #test{
        width:1140px !important;
    } 
}
@media (min-width: 992px) and (max-width: 1199px) {
    #test{
        width: 940px !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    #test{
        width: 720px !important;
    }
}
@media (max-width: 767px) {
    #test{
        width: 100% !important;
    }
}

JSSfiddle