Weird z-index issue

Design help General
1

I’m having a weird issue that seems simple and I just can seem to figure it out. I’m trying to build out a mobile hamburger menu that sits on top of everything else when it is open. I have a white div that will serve as the background eventually. Right now the Hero container (ugly green background) is displaying on top of the “mobile-menu-background” even though “mobile-menu-background” is above in the layer list and I can find any z-index applied to anything in the Hero container.

Another weird thing to point out. In the designer only the button sits above the menu background, but when published the whole thing does.

https://preview.webflow.com/preview/loren-tracy-design-portfo-cbcaef2ced52e?utm_source=loren-tracy-design-portfo-cbcaef2ced52e&preview=f759de4771303bc401dd140ee0699847

2

I don’t see anything like what you are describing in your link. I’m guessing you figured it out or changed things?

3

No, it is still not working. I lowered the opacity of mobile-menu-background so you can see whats behind it now, but that “See Work” CTA should be behind that mobile-menu-background overlay. It lives in the “Hero” section, which all shows up behind that mobile-menu-background overlay other than that blue CTA.

4

Your mobile menu doesn’t even stretch down to the CTA button.

15%20PM
15%20PM752×534 16.3 KB

Everything is completely white for me. Not sure what you did. Can you do a video screencast to show whats going on and what you are expecting? https://www.getcloudapp.com

5

I changed the overlay to pink so that you can see what I’m talking about a little better now. Look at desktop mode, you will see now that the whole screen has a pink overlay on top of it. It’s transparent-ish so you can see the content behind it. All the page content is behind the pink overlay (a DIV with the class mobile-menu-background) except for some reason blue “See Work” CTA in the Hero section.

Note: I’m not talking about the Webflow menu element. My plan is to build a custom one so I’m not going to use the one that ships with Webflow.

So, for whatever reason, that blue CTA is stacking on top on the mobile-menu-background DIV and I have no clue why. Hope this makes more sense!

weird-z-index-issue
weird-z-index-issue558×761 40.5 KB

6

it’s because it’s position is fixed and the button has a higher z index. Just make the overlay z index 1000 and it’ll be over the top of the button.

7

Setting a z-index on the overlay did the trick. Thanks for that. The weird thing to me is, the button nor its container had a z-index attributed to it. So, I would have thought the overlay would have stacked on top of everything automatically. It did for every object but that one button. Weird stuff, but I appreciate you taking the time to help.