Menu icon Foundation
Using Foundation Off-Canvas only on Mobile and Top-Bar on Desktop

Hi there,

I really like the off-canvas menu and I would like to use it. Problem is, that it keeps being there, even on medium and large screens. I would like to have a normal navigation on medium to large screens and only turn the off-canvas menu on, when I am on mobile.

Is there any good resource, that already covers this?

Would be great. Thank you in advance. Kind regards, george :)

off-canvastop-barmenunavigation

Hi there,

I really like the off-canvas menu and I would like to use it. Problem is, that it keeps being there, even on medium and large screens. I would like to have a normal navigation on medium to large screens and only turn the off-canvas menu on, when I am on mobile.

Is there any good resource, that already covers this?

Would be great. Thank you in advance. Kind regards, george :)

Janusch H about 5 years ago

Hey,
have a look at the visibility classes: http://foundation.zurb.com/docs/components/visibility.html
You might have to wrap the off-canvas in a container that is only displayed for small screens.

Have a look at the http://foundation.zurb.com/docs/ they are using the same technique as you would like to.

This should work, the downside is just that you have to render the menu twice, once as off-canvas and once in the topbar.

Hope this helps!

George Geladaris about 5 years ago

So there is only this workaround... :(

Thank you for your contribution.