Mobile Menu Overlay

Question

I'm in the process of creating a Wordpress starter theme which uses SnapJS to provide an out-of-the-box mobile menu solution.

I've got this working nicely but I've run in to one little problem that I can't quite fix.

The theme can be found at: http://sandbox.benpalmer.me/flow/ok-i-lied-heres-another-test/

If you shrink the height of your browser down to 405 pixels or less you'll see my issue. The menu is currently in an absolutely positioned div underneath the sites wrapper. The wrapper is also absolutely positioned and is moved to the right to reveal the menu.

The problem is that the wrapper is positioned absolutely to the top and bottom of the browser (or it will be higher if the content runs that long). When the mobile menu is a taller than the content and browser window, it shows up under the wrapper because of course, the wrapper is no longer tall enough to cover it.

I'm sure there is a fairly simple solution I'm missing but I can't quite get it.

I've tried applying the height of the menu to the wrapper which works but really I'm looking for a CSS solution.

Any help would be great! Thanks!

Answer 1

Found that simple solution by putting a 100% height on the mobile menu then changing that to auto as soon as the menu is opened.