title: Fade In jquery image overlappes my Fixed Header
body: <p>This is the jquery</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $('#showhidetarget').hide();
  
          $('a#showhidetrigger').click(function () {
              $('#showhidetarget').toggle(150);
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>This is my sticky header nav CSS</p>
  
  <pre><code>#nav {
      background-color: #001f22;
      height: 30px;
      width: 100%;
      position: fixed;
      list-style-type: none;
      margin-top: 0px;
      margin-bottom: 0;
      float: left;
      margin-right: auto;
      margin-left: auto;
  </code></pre>
  
  <p>Nav Html</p>
  
  <pre><code>  &lt;div id="nav"&gt;&lt;ul&gt;
           &lt;li&gt;&lt;a href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#about"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#portfolio"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Fade-in CSS</p>
  
  <pre><code>.fade {
     opacity: 0.5;
     transition: opacity .50s ease-in;
     -moz-transition: opacity .50s ease-in;
     -webkit-transition: opacity .50s ease-in;
     }
  
     .fade:hover {
      opacity: 1;
        }
  
     .fade:visited {
      opacity: 1;
  
        }
  </code></pre>
  
  <p>So basically, my fade-in/fade-out jquery images OVERLAP/go in front, of the fixed nav bar. How do i fix this so it doesn't overlap? </p>