title: Fixed Navbar under non-fixed header
body: <p>My site is made up of four <code>div</code>s; in order they are: <code>header</code>, <code>navbar</code>, <code>main</code>, and <code>footer</code>.</p>
  
  <p>I want the header to stay in place and the navbar to be underneath the header when at the top, but when the page is scrolled I want just the navbar to stick to the top. </p>
  
  <p>What happens with the code I have right now (<a href="http://jsfiddle.net/BGLwM/" rel="nofollow">http://jsfiddle.net/BGLwM/</a>) is that the navbar sticks to the top, but on top of the header. When I set the top to be the height of the header (placing the navbar below the header) and scroll down, there is a gap as wide as the header and the navbar does not stick to the top.</p>
  
  <p>Is there a way to solve this in pure CSS? I am NOT using Bootsrap and while I don't have a problem using JS or JQuery, I don't have any experience in using either.</p>