title: JS Overlay Menu Not Showing
body: <p>I would like to display <a href="https://codepen.io/RSH87/pen/rmgYbo" rel="nofollow noreferrer">this</a> full screen overlay menu (which works great) on my web page, on the top left hand side. My code so far can be seen <a href="https://codepen.io/johnny_s/pen/bvbGYB" rel="nofollow noreferrer">here</a>.</p>
  
  <p>When I click the overlay menu, it seems to be 'hidden' behind the main page content. </p>
  
  <p>I changed some of the <code>z-index</code> values for the overlay menu, but when I did this the main page navigation (element called <code>slick-dots</code>) stopped working (visible but not clickable). </p>
  
  <p>When the overlay menu is open, the navigation (<code>slick-dots</code>) should be hidden. However when the full screen menu is closed, the navigation should be visible and work.</p>
  
  <p>I'm not sure how I should configure the <code>z-index</code> or <code>position</code> values in order to achieve what I want?</p>
  
  <p>Any help with this would be appreciated.</p>