Streaming live at 10am (PST)

Issue with the opacity layer under navigation


I am trying to get the dark background behind a dropdown menu after the user clicks on the item.
I have div block, fixed, 100% height and it works. But the issue is, I have as well nav fixed and few other elements and I don’t know how to bring it on top?

Any tips appreciated.

Here is my public share link:

Hey @paulina,

Have you tried raising the z-index value of that DIV218? That would allow it to be on top of your other elements.


Hopefully this helps.

1 Like

Yes, it helped. Needed to raised it to 1001.
But somehow menu icon is not opening after I raised z-index.

If you want the nav on top you need to make sure that it has a higher z-index than the overlay.

Since that overlay is the highest set currently, that is all you will be able click on until something else has a higher value.

Hmm…So if I understand correct.
If this div block is fixed and with high index-z this means that all the clickable elements should be above it because even with 0% opacity it means it still exists there?

Haha I dont know what to do then. Because even if I will set nav above, I have other elements that will be affected by it while being below.

There is a way to set a different index-z during the interaction?

I am not sure if I understand the objective you are trying to achieve with this setup.

But you could utilize interactions that manipulate the opacity and display of the element, then you could have display: none and opacity at 0% to where you can click the elements beneath it and then when you want the overlay to show you can have it display: block (or fixed) and the opacity up to 100%.

1 Like

Yes, that’s more or less what I was asking about. :slight_smile:
Thanks a bunch and sorry for being so inconcrete, I am still not familiar with all the functionalities in webflow.

1 Like

You’re all good, no need to be sorry; it’s all an exciting, learning process!

Glad I could help you out a bit.

Happy creating!

1 Like