Menu icon Foundation
Foundation 6 Off-canvas structure

Hi,

 

I'm using off-canvas for the main navi of a page (small breakpoint only).

To prevent duplicate content I've put the off-canvas menu inside the off-canvas-content and use some CSS to undo the off-canvas styling for medium up (position:static; ...)

Defining the off-canvas menu in F5 seemed to be conform with the documentation but in F6 it is separated from the off-canvas-content.

 

Is there a reason for this? Will it cause any issues when nesting the menu in the off-canvas-content?

 

off-canvasF6

Hi,

 

I'm using off-canvas for the main navi of a page (small breakpoint only).

To prevent duplicate content I've put the off-canvas menu inside the off-canvas-content and use some CSS to undo the off-canvas styling for medium up (position:static; ...)

Defining the off-canvas menu in F5 seemed to be conform with the documentation but in F6 it is separated from the off-canvas-content.

 

Is there a reason for this? Will it cause any issues when nesting the menu in the off-canvas-content?

 

Rafi Benkual about 3 years ago

Hi Kai,

You should be able to do it that way. The off-canvas-menu wrapper is just a place to hold the menu but it does not style it. It gives you a class to target if you want to apply a background color or other styles.

Kai Falkowski about 3 years ago

Hi Rafi,

thanks for your quick reply.

I was worried there has been a specific reason to put the menu outside the off-canvas-content (cross-browser issues etc.) but I'm glad to hear there's no problem with this.

Ryan McCready over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63