Possible z-index issue

Question

It seems that my dropdown menu its z-index is doing something strange:

https://uma.be/evenement/uma-day-2020-best-media-campaigns/

When you hover the menu-item "Commissions", the dropdown menu goes underneath the image.

I've already checked the z-index of the image itself and the z-index of .mega-sub-menu. Both seems okay to me. The class .mega-sub-menu has an z-index of 999 and the image hasn't got one.

I've added position: relative; z-index: 1; to the image, but that didn't fix the issue.

Is it possible that the Lazy loader does something with the image so that it goes over the sub navigation?

Answer 1

Problem is your #navbar's z-index property. Increase it or remove it and that should fix your problem >

 #wrapper-navbar {
     position: relative;
     /* z-index: 1; */ 
    }

Answer 2

This is because your image and the menu are not in the same stacking context. To ensure that they are in the same stacking context, you will need to find out the parent element of both elements that are siblings to each other.

In this case, that will be:

• #wrapper-navbar as the parent element for the dropdown menu
• #tribe-events-pg-template as the parent element for the contents of the page (which includes the image)

All you need to do is:

1. Set the z-index of #wrapper-navbar to 2
2. Relatively position #tribe-events-pg-template and set its z-index to 1

Updated CSS:

#wrapper-navbar {
  position: relative;
  z-index: 2;
}
#tribe-events-pg-template {
  position: relative;
  z-index: 1;
}

After fix is applied:

Answer 3

Edit the following (added the z-index and position):

#tribe-events-pg-template, .tribe-events-pg-template {
    z-index: 0;
    position: relative;
    margin: 0 auto;
    max-width: 1200px;}