StandardNerd StandardNerd - 1 month ago 10x
CSS Question

Foundation 6 off-canvas-menu doesn't "hide" visible page

I'm building an off-canvas-menu for small viewports with Foundation 6 and i can't get to overlap the whole visible page area . The area right hand side underneath of the off-canvas-menu doesn't have background opacity.

enter image description here

To try it just resize the browser viewport width less than 640px (small viewport) and click on the burger icon on the top left.

link to website

How can i ink the whole with transparent black color instead just the upper part?


I think this is by design, but kinda buggy.

That grey overlay's parent takes up 100% of the screen height when the off-canvas menu is opened, and you typically don't see anything beneath it to notice that it doesn't cover all the content because that content is out of the viewport.

You can set the height on that wrapper to 'auto' or remove the 100% value for height altogether. The caveat to this is that when you do this, ALL the content in the viewport is going to scroll, not just what is inside the off-canvas menu.

// This element needs to have the height override
<div class="off-canvas-wrapper-inner is-off-canvas-open is-open-left" data-off-canvas-wrapper="">...</div>

.off-canvas-wrapper, .off-canvas-wrapper-inner {
    height: 100% <-- remove this, override it, or set to 'auto'.