Menu icon Foundation
OffCanvas Reveal-For-Large?

Can I get some advice on reveal-for-medium when it comes to offcanvas? In the docs here: http://foundation.zurb.com/sites/docs/off-canvas.html#reveal-on-larger-screens it says that the menu will be fixed. Well when I add that the offcanvas menu just shows all the time and my button to open it no longer works. I really thought what would happen is the offcanvas would be fixed so the page does not jump to the top when button clicked. Am I misunderstanding this: http://foundation.zurb.com/sites/docs/off-canvas.html#reveal-on-larger-screens

offcanvas reveal-on-larger-screens

Can I get some advice on reveal-for-medium when it comes to offcanvas? In the docs here: http://foundation.zurb.com/sites/docs/off-canvas.html#reveal-on-larger-screens it says that the menu will be fixed. Well when I add that the offcanvas menu just shows all the time and my button to open it no longer works. I really thought what would happen is the offcanvas would be fixed so the page does not jump to the top when button clicked. Am I misunderstanding this: http://foundation.zurb.com/sites/docs/off-canvas.html#reveal-on-larger-screens

Rafi Benkual over 3 years ago

Hmm, it's tough to tell without a bit more context. How are you using the menu - is it a fixed/sticky title bar?

The reveal on large is made to be a sidebar on your page for larger screens then on mobile collapse into the off-canvas menu. Like this example: http://foundation.zurb.com/templates-previews-sites-f6/portfolio.html

Have some more info on what you're trying to build because we can guide you more?

Tom Dean over 3 years ago

Ok, after looking at your example I do get it but I still don't get how to make my off canvas sticky. It jumps to the top of the page and yes the menu I have it in is sticky. I think this is a major topic here though. I am also trying to make the offcanvas cover the content not move over the content. Perfect example of what I am after using offcanvas lives here: http://www.scorpiondesign.com/ just click the email icon top right...

Tom Dean over 3 years ago

Ah ha! The proper answer to my question isssssss...don't use OffCanvas if all you want to do is toggle a damn fixed panel. Use: https://github.com/zurb/foundation-sites/issues/7932 CodePen: http://codepen.io/zurbchris/pen/obgwGe

Perfect now I don't even need to include OffCanvas in this project. I feel duh.

Rafi Benkual over 3 years ago

No need to feel like that :) and yes, that is a different component. A slide out panel would solve your use case. So is the advantage that you can have a fixed top menu that triggers the panel to open, then it opens in view. I modified the codepen a bit so people can scroll and see http://codepen.io/rafibomb/pen/xZpaBG