title: How to have header on top of the slider
body: <p>This is the current state:  </p>
  
  <p><img src="https://i.imgur.com/hMKE5Tb.png" alt="&#39;asd&#39;"></p>
  
  <p>and I want it like this:  </p>
  
  <p><img src="https://i.imgur.com/0vdHmbY.png" alt="&#39;asd&#39;"><br>
  I have done editing through photoshop to show my desired output. I have tried many things but i'm not successful.  </p>
  
  <p>This is the HTML:  </p>
  
  <pre><code>&lt;body&gt;
  &lt;header&gt;
    &lt;h1&gt;Maxtergo - Guaranteed Perfect Product&lt;/h1&gt;
    &lt;nav class='main-menu'&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a class='active' href='#'&gt;Home&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href='#'&gt;Portfolio&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href='#'&gt;Services&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href='#'&gt;Feature&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href='#'&gt;Contact&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href='#'&gt;Help&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
  &lt;div id='slider'&gt;
    &lt;div id='bannerscollection_zoominout_opportune'&gt;
      &lt;div class='myloader'&gt;&lt;/div&gt;
      &lt;!-- CONTENT --&gt;
        &lt;ul class="bannerscollection_zoominout_list"&gt;
  
            &lt;li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText2" &gt;&lt;img src="images/02_opportune.jpg" alt="" width="2500" height="1172" /&gt;&lt;/li&gt;
  
  
            &lt;li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText3" &gt;&lt;img src="images/03_opportune.jpg" alt="" width="2500" height="1172" /&gt;&lt;/li&gt;
  
  
            &lt;li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText4" &gt;&lt;img src="images/04_opportune.jpg" alt="" width="2500" height="1172" /&gt;&lt;/li&gt;
  
            &lt;li data-initialZoom="0.77" data-finalZoom="0.77" data-horizontalPosition="left" data-verticalPosition="center" data-text-id="#bannerscollection_zoominout_photoText5" &gt;&lt;img src="images/05_opportune.jpg" alt="" width="2500" height="1172" /&gt;&lt;/li&gt;                    
  </code></pre>
  
  <p>And no css is on the slider.
  and this is header CSS:  </p>
  
  <pre><code>header {
    overflow: hidden;
    padding: 25px 0px;
    width: 960px;
    margin: 0 auto; }
  </code></pre>