This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Reply To: Wrapped menu item "overlays" on top of drop-down menu items

#2822
mharpen
Participant

I tried setting z-index all over the place on sub-menus and couldn’t get the sub-menu to overlay on top of the wrapped around menu item. After a few hours i figured out why. Here’s the CSS to solve it, and my comment which explains it. This prevents an even more messy situation, when both the wrapped around menu below has a sub-menu also. It’s then pretty much imposible to select a sub-menu item. This scenario can happen if someone has a small resolution monitor, small browser window, or large fonts.

Jason, when you build the menu in the php, you might want to add a sequential z-index to each main menu, or put this CSS in the next update. Thanks.

/*ensure submenus overlay any main menu items that may have wrapped below menu bar.
	since submenus are absolute positioned inside relative positioned main menus,
	then 1st main menus need higher z-indexex so submenu can overlay)*/
#main-menu ul li:nth-child(1) {z-index:1009}
#main-menu ul li:nth-child(2) {z-index:1008}
#main-menu ul li:nth-child(3) {z-index:1007}
#main-menu ul li:nth-child(4) {z-index:1006}