Z-Index Issue? Megamenu Appears Below Homepage Slider

  • Resolved Ario

    (@ariolander)


    6 years, 3 months ago

    For whatever reason my Max Mega Menu dropdown/flyout/tabbed menu items all appear behind my home page slider. I checked the Z-index on the slider and it is really low, like only 20 or so.

    I defined 999 in the Menu Theme, did the previous tip of adding z-index to my menu theme.
    #{$wrap} {
    clear: both;
    position: relative;
    z-index: 999999;
    }

    I tried grabbing the inspect tool and CSS classing a high z-index to almost ever class or ID I could find to little success. Is there an option I am overlooking in Max Mega Menu to set the dropdown elements a higher z-index?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author megamenu

    (@megamenu)

    6 years, 3 months ago

    Hi Ario,

    Please try this custom CSS:

    header.et-l {
    z-index: 99999999;
    position: relative;
}

    (if that works, then it may be worth removing any other custom z-index CSS you have just to keep things simple)

    Regards,
    Tom

    Thread Starter Ario

    (@ariolander)

    6 years, 3 months ago

    Thanks for the assist. I didn’t think that z-index was affected that much by their parent containers. With your additional direction I was able to get my entire header all Z-Indexed properly.

    My top Max Mega Menu secondary menu now displays over my main menu, and my AJAX search box is no longer obscured by my Max Mega Menu main menu. Everything is in their proper order now.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Z-Index Issue? Megamenu Appears Below Homepage Slider’ is closed to new replies.