I am working to make an overlay menu from one the tutorials. It is a nice way of doing menu. Only problem i noticed is that when you have large menu then you are not able to scroll down the page in page has less text as is case with example one
In second example i have lot of page text and still and when i scroll it scroll page text but not the overlay. You can noticed in background page scroll. example two
How can i make only make overlay to scroll and not the actual page so that when in case i have marge menu then i over will scroll to length of menu
HTML CODE
<div class="container">
<section>
<p>Overlay fades in and menu rotates slightly in perspective. As seen on <a href="http://hugeinc.com">Huge</a></p>
<p><button id="trigger-overlay" type="button">Open Overlay</button></p>
</section>
</div><!-- /container -->
<!-- open/close -->
<div class="overlay overlay-hugeinc">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Clients</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About 2</a></li>
<li><a href="#">Work 3</a></li>
<li><a href="#">Clients 4</a></li>
<li><a href="#">Contact 5</a></li>
</ul>
</nav>
</div>
