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.

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

  • Creator
    Topic
  • #2818
    mharpen
    Participant

    Hi J. Someone who has large fonts set on their mac sent this image to me.
    http://tinypic.com/r/14ui8au/6

    Is it possibly you can change the z-order of the “drop-down sub-menu items” so they overlay on top of any possible wrapped menu items? Also, just wondering if you know if it’s possible somehow to prevent the menu fonts from going to larger fonts due to the user’s preferences, to avoid the menu wrapping? At normal fonts size this menu has plenty of room on the right side. Thanks as always!

Viewing 1 replies (of 1 total)
  • Author
    Replies
  • #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}
Viewing 1 replies (of 1 total)
  • The forum ‘Alyeska Responsive WordPress Theme’ is closed to new topics and replies.