title: Sticky Header Overlaps Mobile Navigation
body: <p>I have racked my brain for a few days now trying to fix this. I have a sticky header that uses a little jQuery:</p>
  
  <pre><code>&lt;script&gt;
      $(window).scroll(function() {
      if ($(this).scrollTop() &gt; 1){  
          $('header').addClass("sticky");
         }
         else{
           $('header').removeClass("sticky");
         }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Then, within my header I have the mobile menu that is hidden using a media query until a min-width of 750px. The HTML looks like this:</p>
  
  <pre><code>&lt;div class="menu-button"&gt;
      &lt;i class="fa fa-align-justify"&gt;&lt;/i&gt;
      &lt;span&gt;Menu&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="secondary-nav-wrapper"&gt;
      &lt;nav role="navigation" class="responsive-nav"&gt;
          &lt;ul&gt;
              &lt;li class="menu-title"&gt;
                  Where to?
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="index.php" class="home" title="Home"&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="contact/contact.php" class="contact" title="About and Contact"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="portfolio.php" class="portfolio" title="Portfolio"&gt;Portfolio&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have been using SASS for my CSS, which looks like this:</p>
  
  <pre><code>    body.shift-left {
      background-color: $softblack;
  
      div.page {
          @include transition(all 0.25s ease 0s);
      left: -345px;
      position: relative;
      top: 0;
  
          header {
              div.secondary-nav-wrapper {
          display: block;
          position: fixed;
          right: 12px;
          top: 8px;
          width: 324px;
  
                  nav.responsive-nav {
                      display: block;
  
                      ul {
                          padding: 0;
                          margin: 0;
                          line-height: 46px;
  
                          li.menu-title {
                              font-family: $font-primary;
                              color: white;
                              font-size: 2em;
                background-color: $blackgrey;
                padding: 5px 5px 5px 15px;
                          }
                          li {
                              font-family: $font-default;
                              color: $lightgrey;
                              font-size: 1.5em;
  
                              a {
                                  display: block;
                              }
                          }
                          hr {
                               border: 0;
                               height: 1px; 
                               background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
                               background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
                               background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
                               background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
                          }
                      }
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>Now, (finally) getting to the point. It works perfectly on a desktop, exactly the way I want it to look:</p>
  
  <p><a href="http://kevindenchdesign.com/multimedia/screenshots/Stack-overflow-issue.PNG" rel="nofollow">Desktop version looks fine</a></p>
  
  <p>Then whenever I get on a mobile device: <a href="http://kevindenchdesign.com/multimedia/screenshots/IMG_0263.jpg" rel="nofollow">As you can see,</a> the header overlaps the menu, looking terrible. </p>
  
  <p>How the menu works: I am using jQuery to add a class to body, and when it does, I have styled it so that body moves either right or left depending on the menu.</p>
  
  <p>The HTML where the class is added looks like this.</p>
  
  <pre><code>&lt;body class="" id="home"&gt;
      &lt;div class="page"&gt;
  
        &lt;header&gt;
  </code></pre>
  
  <p>I have no idea what is going on. I have looked up if a fixed position breaks on mobile, but received no clear answer; I have tried using z-index and that doesn't matter. I even tried positioning it absolutely, and everything but the background color on "div.page" goes to the front. That "fix" looked okay for a minute, until I scrolled down and the header broke and the logo went on the top position.</p>
  
  <p>If you would like to see for yourself what I am talking about, my test site is: <strong>kevindenchdesign.com/playground/index.php</strong> Stay on the index page, as I am trying to fix the problem for mobile on that page first. The other pages are broken and a lot of links aren't working too well. So go ahead and inspect the index page.</p>
  
  <p>I really appreciate any help or advice on this one, since having a navigation working properly for mobile is a good thing. I am open to other ways of doing the menu too if you can't figure it out and are willing to share code.</p>
  
  <p>Thanks again, have a great weekend.</p>