title: How to have bootstrap fixed navbar not full width with banner on top
body: <p>So I am just getting started with bootstrap, and I need help setting up a navbar.</p>
  
  <p>What I want ideally, is to have a top centered banner, and just below it a navbar. When the user scrolls below, the banner will scroll offscreen but the navbar will stick to the top. If the user scrolls all the way up again, the banner will reappear. For mobile users, they would have the icon on the right and when pressed will create a drop down menu.</p>
  
  <p>The banner and the top navbar are not full width. The banner is 960px long, and I have it setup using <code>class="col-xs-12 col-md-10 col-md-offset-1"</code>. Aesthetically it looks good this way for me.</p>
  
  <p>I have seen a few posts on this topic, but none really mixing all these requirements together (not full width, sticking to top, and banner logo on top of navbar). I tried reverse engineering a few of the approaches but I have had no luck at all.</p>
  
  <p>At the moment, I am just using pill boxes because it was easy to do and format for me. Any help is greatly appreciated. Thanks!</p>
  
  <p><strong>UPDATE:</strong> Here is my code for what I currently have. I am happy with this setup, just would like the navbar to stick once it scrolls down. There are a lot of divs here as you will see, that I use for styling a page and shadows. Probably can be much more efficient, but as is it looks exactly like I want.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-md-10 col-md-offset-1 rcshadow"&gt;
              &lt;div class="row"&gt;
                  &lt;img class="img-responsive center-block" src="../images/header.jpg"&gt;
                  &lt;!-- Fixed navbar --&gt;
                  &lt;div class="navbar navbar-default navbar-rc"&gt;
                      &lt;div class="navbar-header"&gt;
                          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                          &lt;a class="navbar-brand" href="#"&gt;&lt;span class="glyphicon glyphicon-home" /&gt;&lt;/span&gt;&amp;nbsp;Roll Call&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div class="collapse navbar-collapse"&gt;
                          &lt;ul class="nav navbar-nav"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-user"&gt;&amp;nbsp;New&lt;/span&gt; &lt;span class="glyphicon"&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="dropdown"&gt;
                                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;&lt;span class="glyphicon glyphicon-search" /&gt;&amp;nbsp;Search&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Contact Search&lt;/a&gt;&lt;/li&gt;
                                      &lt;li class="divider"&gt;&lt;/li&gt;
                                      &lt;li class="dropdown-header"&gt;Quick Search&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;
                                              &lt;form class="navbar-form" role="search"&gt;
                                                  &lt;div class="input-group input-group-xs"&gt;
                                                      &lt;input type="text" class="input" placeholder="Search by name..." name="srch-term" id="srch-term"&gt;
                                                      &lt;div class="btn-group btn-group-xs"&gt;
                                                          &lt;button class="btn btn-default" type="submit"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                              &lt;/form&gt;                                        
                                      &lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#contact"&gt;&lt;span class="glyphicon glyphicon-list-alt" /&gt;&amp;nbsp;Attendance&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#contact"&gt;&lt;span class="glyphicon glyphicon-calendar" /&gt;&amp;nbsp;Planner&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#contact"&gt;&lt;span class="glyphicon glyphicon-stats" /&gt;&amp;nbsp;Statistics&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;ul class="nav navbar-nav navbar-right"&gt;
                              &lt;li&gt;&lt;a href="#contact"&gt;&lt;span class="glyphicon glyphicon-log-out" /&gt;&amp;nbsp;Log-out&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="rcpage"&gt;
                      &lt;div class="row"&gt;
                          &lt;h1&gt;Test&lt;/h1&gt;
                          &lt;hr&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My css file (besides the bootstrap):</p>
  
  <pre><code>/* set a max-width for horizontal fluid layout and make it centered */
  .container-fluid {
    margin-right: auto;
    margin-left: auto;
    max-width: 970px;
  }
  
  body {
      margin:0;
      padding:0;
      font-size:100%;
      font-family:verdana,arial,'sans serif';
      background-color:#3b607e;
      color:#000000;
  }
  
  .navbar-rc {
      margin-bottom:0px;
      -moz-border-radius:0px;
      border-radius:0px;
  }
  
  .navbar-nav &gt; li &gt; a, .navbar-brand {
      padding-top:5px !important; 
      padding-bottom:0 !important; 
      height: 30px; 
  } 
  
  .navbar-nav &gt; li:hover, .navbar-header:hover {
      background-color:#e7e7e7;   
  }
  
  .navbar {
      min-height:30px !important;
  }
  
  .rcshadow {
      -moz-box-shadow: 0px 0px 30px 10px #000;
      -webkit-box-shadow: 0px 0px 30px 10px #000;
      -khtml-box-shadow: 0px 0px 30px 10px #000;
      box-shadow: 0px 0px 30px 10px #000;
      -moz-border-radius: 0px 0px 15px 15px;
      border-radius: 0px 0px 15px 15px;
  }
  
  .rcpage {
      background-color:#FFF;
      padding:0px 30px;
      margin-left:auto;
      margin-right:auto;
      -moz-border-radius: 0px 0px 15px 15px;
      border-radius: 0px 0px 15px 15px;
  }
  </code></pre>