Menu icon Foundation
Full-Width Off-canvas How To

I"m working on a site where I need an off-canvas menu to be full-width at all sizes (mobile & desktop). in my css I've set .off-canvas {width:100vw} This works, however the transition is very jumpy. as you can see from the attached gif.

 

How can I fix this so it isn't so jumpy

 

jumpy off canvas

offcanvas off-canvas

I"m working on a site where I need an off-canvas menu to be full-width at all sizes (mobile & desktop). in my css I've set .off-canvas {width:100vw} This works, however the transition is very jumpy. as you can see from the attached gif.

 

How can I fix this so it isn't so jumpy

 

jumpy off canvas

Rafi Benkual almost 2 years ago

Might use this code then: https://foundation.zurb.com/building-blocks/blocks/off-canvas-full-screen.html