ddlevelsmenu wrapping issue on mobile/low resolution

[ModemMisuser]

1) Script Title: All Levels Navigational Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

3) Describe problem:

On mobiles (or any low-resolution window; just resize browser to see problem), ddlevelsmenu doesn't wrap correctly. It wraps what looks like 1/2 or 1/4 of a line, which on a mobile is obviously non-optimal. We've been using the menu for years on our site (amphigory.com) but as mobiles become more popular we'd like to resolve the issue. I've looked into the CSS, and while I'm not a CSS wizard, I can't find anything obvious that would cause the issue.

Any help?

[Beverleyh]

OK - add the following to your menu CSS;

.underlinemenu ul li {
	float: left;
	margin-bottom: 1em; /* change this if you need */
}

.underlinemenu ul li a {
	white-space: nowrap;
}

[ModemMisuser]

Hey! That makes it wrap correctly! But, it pushes the menu itself down on top of the box-shadow I have set on the wrapping div. You can see this @ www.amphigory.com ... I'll leave it up for a while since it's early and there's not much traffic. But I'll have to take it out eventually, since this "breaks" it for all users.

Edit: played around with it; it's the float: left that causes it to drop into the box-shadow. But taking that out makes it stop wrapping correctly too, and there's the limit of my CSS wizardry.

[ModemMisuser]

Fixed it (sort of) with a padding-bottom: on the wrapping div - that at least keeps the menu "inside" the box when it's in high-res. When wrapped, though, it still drops most of itself outside that box (wrapping div). Shouldn't that wrapping div expand since the content contained within has grown?

(And I know this is outside the scope help with ddlevelsmenu, but any help would be greatly appreciated! Playing major catch-up here.)

[Beverleyh]

No problem - I didn't see the shadow but you can easily fix the float issue by doing this to clear the float on the container;

.underlinemenu ul li {
	float: left;
	margin-bottom: 1em; /* change this if you need */
	overflow:hidden;
}

.underlinemenu ul li a {
	white-space: nowrap;
}

[ModemMisuser]

Huh - that had no effect.

(BTW did I post something forbidden/outside the rules in my previous post? I noticed you edited it.)

[ModemMisuser]

Ha, nevermind, I misunderstood that the overflow: needs to go on the wrapping div, not in the underlinemenu CSS I copied your code verbatim without applying logic. It's fixed.

Thank you so much!

[Beverleyh]

Sorry, that was actually meant to be...

.underlinemenu ul {
	overflow:hidden;
}

.underlinemenu ul li {
	float: left;
	margin-bottom: 1em; /* change this if you need */
}

.underlinemenu ul li a {
	white-space: nowrap;
}

The post editing was just me following forum guidelines about new members and links. We remove active URLs to deter spammers (not you personally, but others looking in who try to post links that drive traffic to their stores, etc). Just housekeeping

[ModemMisuser]

Oddly, putting the overflow: on the overall wrapping div (not part of the menu; the div that has the box-shadow) ALSO worked.

No problem about the link; I didn't "mean to" make it a link, the forum software does that. I only posted it so that you could see it live, that's all.

(Edit: and in fact, it has to be there; taking that off and putting it on the ul only selector in the ddlevelsmenu CSS makes it not work. BUT! You still helped us so much, thank you again.)

[ddadmin]

I have plans to make this menu more mobile friendly in the coming weeks, maybe have the menu transform into a different, mobile optimized version when the screen is sufficiently small.