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

Question

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.

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?

Answer 1

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'.
}

Answer 2

With Javascript, you can listen for opened.zf.offcanvas event and manually add the grey overlay to the tag that has the off-canvas-content class. Conversely, listen for closed.zf.offcanvas event and remove the css you added when it fires.

Using the example code from Foundation docs:

With HTML:

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- Menu -->
        <ul class="vertical menu">
          <li><a href="#">Foundation</a></li>
          <li><a href="#">Dot</a></li>
          <li><a href="#">ZURB</a></li>
          <li><a href="#">Com</a></li>
          <li><a href="#">Slash</a></li>
          <li><a href="#">Sites</a></li>
        </ul>

      </div>

      <div class="off-canvas-content" data-off-canvas-content>
        <!-- Page content -->
      </div>
    </div>
  </div>
</body>

Then:

$('.off-canvas-wrapper').on('opened.zf.offcanvas', function() {
  $('.off-canvas-content').addClass('grey-out');
});
$('.off-canvas-wrapper').on('closed.zf.offcanvas', function() {
  $('.off-canvas-content').removeClass('grey-out');
});

grey-out class:

.grey-out {
  background: rgba(60,60,60,0.75) !important;
  z-index: 1000;
}

I didn't test this but you get the idea.