Menu icon Foundation
Grid inside tab bar section

I'm trying to achieve something similar to what happens with the icons at the top when this site is shrunk down very narrowly:

http://www.currys.co.uk/gbuk/index.html

I'm doing it with a tab bar and off canvas menu, but I'm having trouble with the layout of icons on the tab bar. I've tried using a grid, but it seems the columns will be stacked on top of each other rather than remaining next to each other, regardless of screen width.

What can I do to fix this, or is there a better approach to achieving this look?

tabbar section grid

I'm trying to achieve something similar to what happens with the icons at the top when this site is shrunk down very narrowly:

http://www.currys.co.uk/gbuk/index.html

I'm doing it with a tab bar and off canvas menu, but I'm having trouble with the layout of icons on the tab bar. I've tried using a grid, but it seems the columns will be stacked on top of each other rather than remaining next to each other, regardless of screen width.

What can I do to fix this, or is there a better approach to achieving this look?

Tony Stark about 5 years ago

You are actually looking for mega menu.
Check here for detail:
http://foundation.zurb.com/forum/posts/232-megamenu

Wing-Hou Chan about 5 years ago

Howdy all!

Looking at the example provided by Oliver I would actually go for the Icon Bar (http://foundation.zurb.com/docs/components/icon-bar.html) combined with Off Canvas.

Here is a demo I made showing the Offcanvas and the Icon Bar together: http://codepen.io/winghouchan/pen/qrKew