Menu icon Foundation
Fixing the (Sticky) Dropdown Z-Index Issue

The Problem:

I've seen this problem being reported many times. This screenshot depicts a dropdown that is being covered up by a callout.

 

Why It's Happening:

The dropdown in this example is a child element of a div (top bar) that has the sticky class applied to it. The sticky element has a z-index of 0, which affects the child dropdown. But after you scroll down the page a little, the sticky gets the "is-stuck" class applied to it, the z-index is set to 5, and this no longer makes the dropdown hide behind the callout. 

 

The solution:

Changing the z-index on the dropdown element itself will not fix the problem as some may have tried. Instead, add a CSS override to keep the z-index on the parent sticky element above 0. I wrote 5 since this is what is-stuck makes it eventually, and it's working fine so far in my application, but you may need to tinker for your specific needs.

.sticky {
    z-index: 5;
}

 

It's worth noting that another reason why this is happening is that the callout has a position: relative which makes it stay on top of the dropdown unless you change the z-index. You could theoretically change the positioning on the callout (and any other position: relative elements) that the dropdown will be covered up/hidden by, but after going down that path initially (and then dealing with positioning of the close button on the callout), I really think this one liner is the easiest solution -- for me at least.

Hope this helps,

Roy

dropdown sticky z-index hide

The Problem:

I've seen this problem being reported many times. This screenshot depicts a dropdown that is being covered up by a callout.

 

Why It's Happening:

The dropdown in this example is a child element of a div (top bar) that has the sticky class applied to it. The sticky element has a z-index of 0, which affects the child dropdown. But after you scroll down the page a little, the sticky gets the "is-stuck" class applied to it, the z-index is set to 5, and this no longer makes the dropdown hide behind the callout. 

 

The solution:

Changing the z-index on the dropdown element itself will not fix the problem as some may have tried. Instead, add a CSS override to keep the z-index on the parent sticky element above 0. I wrote 5 since this is what is-stuck makes it eventually, and it's working fine so far in my application, but you may need to tinker for your specific needs.

.sticky {
    z-index: 5;
}

 

It's worth noting that another reason why this is happening is that the callout has a position: relative which makes it stay on top of the dropdown unless you change the z-index. You could theoretically change the positioning on the callout (and any other position: relative elements) that the dropdown will be covered up/hidden by, but after going down that path initially (and then dealing with positioning of the close button on the callout), I really think this one liner is the easiest solution -- for me at least.

Hope this helps,

Roy

Adam Anderson about 2 years ago

That did it for me. Thanks a million.

Briar almost 2 years ago

I had this same issue with a dropdown going under an Orbit slider - this worked a treat. :)

Thanks for posting, Roy!

Ai7ch 5 months ago

had same issue with a sticky nav on scrolling and a top dropdown was going under the nav

post is dated, but still helping... Thank you!

Alexander Sluiter 3 months ago

You just saved my bacon, and I love bacon! Glad it was a "simple" fix. I was looking all over as to why my images were over top of my menu items.

Alexander Sluiter 3 months ago

You just saved my bacon, and I love bacon! Glad it was a "simple" fix. I was looking all over as to why my images were over top of my menu items.