I have created a menu bar using Foundation’s Top Bar, but am having problems with it, as you can see. Menu items text is overflowing (adding a return) and it’s getting messy.
You are not doing anything wrong per se, it is just a matter of screen real estate. With so many top level menu items it is inevitable that they will start to wrap to another line on all but the widest of screen sizes.
You have several options.
The most obvious one is to group the menus into fewer top level items (by using subpages). Obvious candidates for this would be pages such as About, News, Contact, Documents etc which could all be grouped under a “More” top level menu for example.
Another option is to set TopBar to be in mobile menu mode throughout all screen sizes. Several people do this although it does alter the feel of your page.
You could also use an OffCanvas menu instead of TopBar which, due to its vertical nature, will accommodate an almost unlimited number of items and will scroll vertically if they don’t fit on the screen.
I’ve had a quick experiment using OffCanvas, and I think it does what I need.
One thing, is there a way of copying a stack (OffCanvas etc.) once I’ve set up the colours / look etc. from one page to another, or do I need to re-create it on each page?
Get Stacks 3, it has a new thing called Partials http://yourhead.com/partials/
watch that, and you will get excited on how this will work with your Foundation theme and stacks!!
