off canvas menu gets cut off on pages that have ve

Question

I am trying to implement an off canvas menu. I found the example on Smashing magazine and had implemented the menu---it works great except for pages that only have a small amount of content; the items in the slide out menu only appear as far down as the content goes.

Event the example on Smashing Magazine doesn't work properly if you have a short amount of content and a lot of menu items. I have posted a comment over on the Smashing Magazine post but haven't heard back.

Here's my jsfiddle

If you click on the red box, the menu will appear; It doesn't slide out smoothly because I didn't include the javascript (I think my problem is with the css in inner and outer-wrap). The menu should have 11 items but you only see down to 8.

#outer-wrap {
position: relative;
overflow: hidden;
width: 100%;
}

#inner-wrap {
position: relative;
width: 100%;
}

I really don't want to rebuild the menu some other way. Any assistance is greatly appreciated!! Thank you....

Answer 1

your menu is inside the outer-wrap div with overflow:hidden. that means any element going outside the outerwrap will be "hidden". Just remove the overflow and it should work fine (or put it "visible")

Answer 2

When the viewport width is small enough and your nav element's position turned from relative to absolute which means it jumps out of the normal flow. So it's visual dimension doesn't affect other elements at all, which results in the visually incomplete menu.

To fix it you can either give nav's parent div a fixed height or min-height, or set nav's position to relative and show it another way.

Okay, maybe you just want the code.

var lis = document.querySelectorAll("#nav li");
var minHeight = 41 * lis.length; //41 is the height in pixel of your single menu item
document.getElementById("#nav").style.minHeight = minHeight + 'px';