Menu icon Foundation
F6 offcanvas overlap

In Foundation 5 getting the offcanvas to overlap instead of push was really easy. In Foundation 6 not so much, the Foundation 5 way doesn't work anymore (like I expected) and there are no signs of this on the docs.

Is it still possible to get the offcanvas to overlap the content? And if not, is this something that will be reimplemented in the near future?

Thanks!

foundation 6offcanvasoverlap

In Foundation 5 getting the offcanvas to overlap instead of push was really easy. In Foundation 6 not so much, the Foundation 5 way doesn't work anymore (like I expected) and there are no signs of this on the docs.

Is it still possible to get the offcanvas to overlap the content? And if not, is this something that will be reimplemented in the near future?

Thanks!

Brandon Arnold over 3 years ago

This was a feature we felt over complicated the off-canvas, since it has nothing to do with the body and can be achieved through a fixed position single div.

Heres an example:
http://codepen.io/zurbrandon/pen/adbOPN

Hope this helps

Staphany Park over 3 years ago

I also would have really liked to use the offcanvas, if it was able to overlap instead of push the neighboring content. While the code sample does produce an offcanvas that looks very similar to what I'm looking for, it's still missing many of the conveniences that the 'official' Foundation 6 offcanvas has. For instance, I can't just click anywhere in the surrounding content to close the sidebar.

Phoenix H. over 3 years ago

I am looking for the same solution like @Tim Logemann does.
I want to use the F6 Lib, but i need an overlaping like we had it in F5.

Aaron J. over 3 years ago

EXTREMELY disappointing the only method is to push the content, Bah, it's hard finding any site that reveal off-canvas menus this way... (and for good reason IMO). More disappointing was why it was not added... shocking really.

As I am new to Foundation (couple months), figured I would stop with F5, and go with F6 before getting too deep... so far, I am deeply regretting as the core reason for me is about responsive menus and such... sticky containers, off-canvas with push, all this combined just does not produce equivalent functionality with a persistent Top Bar, and Magellan... I had all this working in a couple hours with my intro to F5. After week (many hours per day), F6 seems under baked for prime time; if anyone is expecting to save time, that is on contract to F5.

Glad for the question and answer/alternative, albeit, not the same.

Fabian almost 3 years ago

It works as Brandon suggests. But still I can not use it, as the function of clicking anywhere to close it, is to important for the usability. So right now, I'm using a plugin like slidebars, which isn't nice.

 

Is there any option we can close @Brandons Solution by clicking anywhere + reducing the opacity of every other element? If there would be one, I'd totaly sign Brandons approach.

 

Hoping for some help.

Rafi Benkual almost 3 years ago

Sure, that can be added with JS. If you add a class to the body, then a click function on that will close the panel.

Ryan McCready over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63

Fabian over 2 years ago

Those are way more than just good news, for me it's gamechanging for the offcanvas. The demo looks so good, can't wait to use it - now that I made my own solution which isn't as performant as needed. 

 

Thank you so much @brettsmason - you got my shoutout!

YH over 2 years ago

Hmm, that link is dead now, I saw the data-transition="overlap" but that doesn't seem to work for me. If someone could link me that fix again would be great! For now I will try to fix it with my own code. 

Edit: Got it working with that codepen by Brandon too, thanks!