title: Navbar slide toggle should slide behind navbar, but slides in front
body: <p>I made this animated navbar, which works as expected.
  The only thing that bugs me is the fact that the list of menu items slides open <strong>in front</strong> of the navbar, instead of <strong>behind</strong> the navbar.</p>
  
  <p>I've set up a JSFiddle to demonstrate the problem: <strong><a href="http://jsfiddle.net/Dreamonic/5ydhgxay/" rel="nofollow">JSFiddle</a></strong></p>
  
  <p>And here's a quick code view (the full code is in the fiddle):</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;header class="header"&gt;
      &lt;div id="logo"&gt; &lt;a href="#top"&gt;
          &lt;img src="http://lorempixel.com/125/25/abstract" alt="Logo"/&gt;
              &lt;/a&gt;
      &lt;/div&gt;
      &lt;nav class="main-nav"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#projects"&gt;Projects&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="#contact"&gt;Contact&lt;/a&gt;
  
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type="button" role="button" aria-label="Toggle Navigation" class="lines-button x"&gt; &lt;span class="lines"&gt;&lt;/span&gt;
  
          &lt;/button&gt;
      &lt;/nav&gt;
      &lt;!-- main-nav --&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.main-nav ul {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
  }
  .main-nav ul.is-visible {
      -webkit-transform: translateY(50px);
      -moz-transform: translateY(50px);
      -ms-transform: translateY(50px);
      -o-transform: translateY(50px);
      transform: translateY(50px);
  }
  </code></pre>