title: Multiple fixed top navbar headers in Twitter Bootstrap 3
body: <ul>
  <li>Bootstrap 3.02</li>
  </ul>
  
  <p>I would like to have 2 fixed to top navbars similair to how Joomla! 3 implements their browse screen.</p>
  
  <p><img src="https://i.stack.imgur.com/IJ2uf.png" alt="Before you scroll"></p>
  
  <p>And then once you scroll navbar #2 butts up against the top one:</p>
  
  <p><img src="https://i.stack.imgur.com/OGXbf.png" alt="Second Navbar butts up against the first"></p>
  
  <p>I have looked at:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/20637235/bootstrap-3-multiple-navbars">Bootstrap 3 multiple navbars</a></li>
  <li><a href="https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/aAGJKArh-8E" rel="nofollow noreferrer">https://groups.google.com/forum/#!topic/twitter-bootstrap-stackoverflow/aAGJKArh-8E</a></li>
  </ul>
  
  <p>but trying multiple snippets I cannot get this to work. Can anyone help with a working demo in jsFiddle?</p>