title: Scrollable off canvas menu
body: <p>I just found an interesting off-canvas menu on codepen. If someone clicks the hamburger icon, it shows overlay menu with its content. But that overlay menu couldn't scroll down at all. If someone scrolls down, the page behind is scrolling; not the overlay menu. I need to scroll down that overlay page. I checked the code and and found the problem. It uses <code>overflow:hidden</code> for that wrapper div. I set <code>overflow: auto</code> to that div; seems problem solved. But background page is still scrolling down with overlay menu. How can I set only overlay menu to be scrolled down?</p>
  
  <pre><code>.overlay {
    position: fixed;
    background: $color-main;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s, visibility .35s, height .35s;
    overflow: hidden;
  }
  </code></pre>
  
  <p>Here is the link for <a href="https://codepen.io/KingKabir/pen/QyPwgG" rel="nofollow noreferrer">codepen</a></p>