Horizontal menu cuts off wide menu items.

[ashooner]

Long menu item names may be cut off in the horizontal main menu. See attached image.

[petervcook]

I am not sure what a solution would be, other than good old fashioned copy editing or to not use the horizontal menu.

I am open if anyone has an idea to get around this. The only thing I can think of is to wrap and expand the height of the menu.

[ashooner]

Yeah, either wrap the text within the menu item, or wrap the list items when they overflow the container (which is what I thought it did).

[petervcook]

We'll give that a shot. I am a little worried about what might happen if the content admin includes more than 5 links. We have the menu wrapping to a new line in that case, but now sure how via CSS we would get one row to expand and not hit the next row. Also just to clarify do you mean overflow the container or expand the container?

[petervcook]

We can make them variable height and get the text to wrap, but sibling menu items won't have any knowledge of a two line menu item so there's no way to get them to expand in the same fashion. The end result is that the floated elements get all thrown out of position. We can kinda cheat and use javascript to format everything at runtime, but that could get squarely. Well, unless we used a table. An alternate option would be to make all menu items 2 lines tall and then vertically center single line items. That would probably cover 99% of use cases (unless you can think of scenario where we'd need 3+ lines for a menu item). Probably not as flexible a solution as was hoped for, but it may be a reasonable compromise.

[ashooner]

I'm going to leave this until we possibly roll a UI framework into the theme. No reason to reinvent the wheel, someone has solved this problem already.