title: place a will-be sticky nav in html
body: <p>My target is to show the banner picture first then the navigation menu, and while the <code>&lt;nav&gt;</code> is scrolled to the top of the screen it sticks there on the top. Also, the <code>site-logo</code>, overlapping with the banner picture first, will appear on the nav bar when <code>&lt;nav&gt;</code> is scrolled and sticks on top. </p>
  
  <p>My question is where to place the nav section in html. Should it be moved to the header section? (In this case, what's the best way to originally position it in css for there is a <code>picture</code> element having several responsive img source tags?) Or should it just stays where it is now, and let the header section to be removed or to wrap the nav?</p>
  
  <pre><code>&lt;body&gt;
    &lt;header&gt;
  
       .....
    &lt;/header&gt;
  
    &lt;div role="banner"&gt;
      &lt;picture&gt;
      &lt;/picture&gt;
      &lt;div role="site-logo"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;nav role="navigation menu"&gt;
      &lt;ul&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/body&gt;
  </code></pre>