title: Multiple fixed top navbar headers in Twitter Bootstrap 3 not working properly?
body: <p>html :</p>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&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;div class="navbar-brand logo"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;Item1&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#about"&gt;Item2&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#contact"&gt;Item3&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#contact"&gt;Item4&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="navbar navbar-default navbar-static-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".main-nav"&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;/div&gt;
              &lt;div class="collapse navbar-collapse main-nav"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;
                          &lt;a href="#"&gt;it1d&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="divider-vertical"&gt;&lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#about"&gt;it2d&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container"&gt;
          &lt;div&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
              &lt;h1&gt;HEllO&lt;/h1&gt;&lt;br&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- FOOTER --&gt;
  &lt;div style="clear: both"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body {
    padding-top: 50px;
  
  }
  
  .navbar-static-top{
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1000;background: #ccc;
  }
  </code></pre>
  
  <p>click here : <a href="http://www.bootply.com/101069" rel="nofollow">http://www.bootply.com/101069</a></p>
  
  <p>In the above code i am using two navbars which i want to be fixed at the top of the page.so above code works fine for desktop and laptops but when seen in mobile.the first navbar is fix and second navbar is coming down.
  so what i need to do to fix both the navbars at the top in both desktops and mobiles??any help would be appreciated??</p>