title: Stop header/nav bar from scrolling
body: <p>Ok so I have header/nav bar which scrolls up/down with each page.  How do I simply fix it to top of page so it no longer scrolls and content scrolls behind it?  I checked out so many examples but most are very old and dont seem to work.
  I want the entire header incl. nav bar just to remain in fixed position!</p>
  
  <p>Appreciate any help.
  Thanks Damien</p>
  
  <pre><code>&lt;header&gt; 
      &lt;div class="nav-responsive"&gt;&lt;div&gt;MENU&lt;/div&gt;
          &lt;select onchange="location=this.value"&gt;
              &lt;option&gt;&lt;/option&gt;
              &lt;option value="index.html"&gt;Home&lt;/option&gt;
              &lt;option value="about.html"&gt;About&lt;/option&gt;
              &lt;option value="services.html"&gt;Services&lt;/option&gt;
              &lt;option value="products.html"&gt;Products&lt;/option&gt;
              &lt;option value="contacts.html"&gt;Contacts&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
     &lt;div&gt; 
        &lt;div&gt;                     
            &lt;h1&gt;&lt;a href="index.html"&gt;&lt;img src="images/JungleDesign.png" alt=""&gt;&lt;/a&gt;&lt;/h1&gt; 
            &lt;nav&gt;  
              &lt;ul class="menu"&gt;
                    &lt;li class="current"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="products.html"&gt;Products&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="contacts.html"&gt;Contacts&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/nav&gt;
            &lt;div class="clear"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;  
  </code></pre>