Menu icon Foundation
Top Bar Desktop / Offcanvas Mobile

I want to design a layout using Top Bar navigation for all desktop devices and Offcanvas for all mobile devices.

1. Would "show-for-touch" / "hide-for-touch" be enough to distinguish between mobile and desktop devices?

2. The main content needs to be inside the Offcanvas structure. Is there a way to switch between Top Bar and Offcanvas navigation without having to include the main content twice (once inside the Offcanvas, the other copy below the Top Bar)?

Thanks,
Udo

offcanvastop barvisibility

I want to design a layout using Top Bar navigation for all desktop devices and Offcanvas for all mobile devices.

1. Would "show-for-touch" / "hide-for-touch" be enough to distinguish between mobile and desktop devices?

2. The main content needs to be inside the Offcanvas structure. Is there a way to switch between Top Bar and Offcanvas navigation without having to include the main content twice (once inside the Offcanvas, the other copy below the Top Bar)?

Thanks,
Udo

R Fletch over 5 years ago

Have a look at the source code for the Zurb documentation page http://foundation.zurb.com/docs/ which has left nav and offcanvas for different screen sizes. Similar to what you are looking for.

I would use hide/show-for-small instead of show-for-touch.