title: Mobile menu z-index issue?
body: <p>I am having issues with my mobile menu, it looks to be a z-index issue as when the menu is toggled, it appears behind the content below. However, I've been playing with this, and I can not get the toggled menu to the front.</p>
  
  <p>Code:
  HTML:</p>
  
  <pre><code>        &lt;section class="navigation"&gt;
              &lt;div class="nav-container"&gt;
                  &lt;div class="brand"&gt;
                      &lt;a href="/" title="Storey &amp;#38; Co. Solicitors" rel="home"&gt;&lt;img class="header-image" src="assets/img/storey-and-co-logo.png" alt="Storey &amp;#38; Co. Solicitors" title="Storey &amp;#38; Co. Solicitors"&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;nav&gt;
                      &lt;div class="nav-mobile"&gt;
                          &lt;a id="nav-toggle" href="#!"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;/div&gt;
                      &lt;ul class="nav-list"&gt;
                          &lt;li&gt;
                              &lt;a href="about-us.html"&gt;About Us&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="our-team.html"&gt;Our Team&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="services.html"&gt;Services&lt;/a&gt;
                              &lt;ul class="nav-dropdown"&gt;
                                  &lt;li&gt;
                                      &lt;a href="divorce.html"&gt;Divorce&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="wills.html"&gt;Wills&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a href="residential.html"&gt;Residential&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="contact.html"&gt;Contact&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="nav-highlight"&gt;
                              &lt;a href="https://www.perfectportal.co.uk" target="_blank"&gt;Obtain a Quote&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>        (function($) {
            $(function() {
              $('nav&gt;ul&gt;li').addEventListener('click',function() {
                $(this).children('.nav-dropdown').show();
              });
              $('nav&gt;ul&gt;li').mouseleave(function() {
                $('.nav-dropdown').hide();
              });
            });
              document.querySelector('#nav-toggle').addEventListener('click', function() {
              this.classList.toggle('active');
            });
            $('#nav-toggle').click(function() {
              $('nav ul').toggle();
            });
          })(jQuery);
  </code></pre>
  
  <p>Sass</p>
  
  <pre><code>        header
              background: $brand-primary
              height: $nav-height
              clear: both
  
          section.navigation
              padding: 0px
              clear: both
  
          nav
            float: right
            ul
              list-style: none
              margin: 0
              padding: 0
              li
                float: left
                position: relative
                a
                  display: block
                  padding: 0 20px
                  line-height: $nav-height
                  background: $brand-primary
                  color: #fff
                  text-decoration: none
                  &amp;:hover
                    background: $brand-3-dark
                    color: #fff
                  &amp;:not(:only-child):after
                    padding-left: 4px
                    content: ' ▾'
                ul li
                  min-width: 190px
                  &amp; a
                    padding: 15px
                    line-height: 20px
                    z-index: 1
  
          .nav-highlight a
              background: $brand-3-dark
              color: #fff
  
              &amp;:hover
                  background: $brand-3-primary
  
          .nav-dropdown
            position: absolute
            display: none
            z-index: 1
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15)
  
          .nav-mobile
            display: none
            position: absolute
            top: 0
            right: 0
            background: $brand-primary
            height: $nav-height
            width: $nav-height
  
          #nav-toggle
            position: relative
            z-index: 9
            left: 18px
            top: 22px
            cursor: pointer
            padding: 10px 35px 16px 0px
            span,
            span:before,
            span:after
              cursor: pointer
              border-radius: 1px
              height: 5px
              width: 35px
              background: #fff
              position: absolute
              display: block
              content: ''
              transition: all 300ms ease-in-out
            span:before
              top: -10px
            span:after
              bottom: -10px
            &amp;.active span
              background-color: transparent
              &amp;:before,
              &amp;:after
                top: 0
              &amp;:before
                transform: rotate(45deg)
              &amp;:after
                transform: rotate(-45deg)
  
          @media only screen and (max-width: $breakpoint)
            .nav-mobile
              display: block
            nav
              width: 100%
              padding: $nav-height 0 15px
              ul
                display: none
                li
                  float: none
                  a
                    padding: 15px
                    line-height: 20px
                  ul li a
                    padding-left: 30px
            .nav-dropdown
              position: static
  
          @media screen and (min-width: $breakpoint)
            .nav-list
              display: block !important
  
          .navigation
            height: $nav-height
            background: $brand-primary
  
          .nav-container
            max-width: $content-width
            margin: 0 auto
  
          .brand
            position: absolute
            float: left
            padding-top: 10px
            vertical-align: middle
            text-transform: uppercase
            font-size: 1.4em
            box-sizing: border-box
            a,
            a:visited
              color: #fff
              text-decoration: none
  
          img.header-image
              max-width: 200px
  
          @media screen and (max-width: $breakpoint-small)
              img.header-image
                  max-width: 175px
                  padding-top: 10px
  </code></pre>
  
  <p>And the live version is here: <a href="http://staging-maris-storey.transitiongraphics.co.uk/" rel="nofollow noreferrer">http://staging-maris-storey.transitiongraphics.co.uk/</a></p>
  
  <p>Help appreciated</p>