Long Menu Bar Problems


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.

I have tried to keep the menu titles as short as possible, but long enough to stop people having to guess.

I need to add about 5 or so more items to the menu, which is going to make an even bigger mess at the current rate of progress.

The banner, menu bar and text are all in a 1 Column Foundation and the fill mode is Fill.

What am I doing wrong or how do I get around this? Any suggestions (well, most suggestions) would be welcome.



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.

Thanks tav,

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
watch that, and you will get excited on how this will work with your Foundation theme and stacks!!

Thanks for the link zebee. That looks really good. In the mean time I’ve sussed out copying stacks - a real drudge though. :smile: