Menu icon Foundation
Is there an example of a top nav with off canvas flyout menu

I can see examples within the documentation for top nav bar and offcanvas but I can't see any examples as to how you would incorporate the two. The top bar just hides the nav links when reduced in size hence the reason for wanting to add offcanvas.

menunavigationflyoutoff canvas

I can see examples within the documentation for top nav bar and offcanvas but I can't see any examples as to how you would incorporate the two. The top bar just hides the nav links when reduced in size hence the reason for wanting to add offcanvas.

Jeff Stone over 5 years ago

I am new to the forum. I too have this same question.

Peter Graff over 5 years ago

if I correctly understand what you're looking to do, I think you need to use both the top-bar and tab-bar elements along with visualization classes to hide/show each at different screen widths. This is what Zurb does with their own site.

Looking at the Zurb site source code, I've been trying to do the same thing for a client site of mine (note that there seems to be a small issue with the top-bar element hiding its section-right links at screen widths between 600-1000px--I started a thread here: http://foundation.zurb.com/forum/posts/263-using-top-bar-with-tab-bar-+-off-canvas).

Hope this helps.

James Dullaghan over 5 years ago

You can use visibility classes to hide the topbar with the "show-for-medium-up", and give the offcanvas "show-for-small-only" class.

This will replace the topbar with the offcanvas on small layouts.

The visibility classes have been rewritten in foundation 5, so they may have changed.

Peter - It looks as though you're using show-for-small and hide-for-small classes. You can find the updated visibility classes here