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.


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%.


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.


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!