Hello,
I am designing a page that has an overlay menu that has an opacity set to 0 until it’s button is clicked. Its container has a z-index set to 100 to ensure it always appears above the rest of the page’s content. The good news is that it works perfectly. The bad news is that I can’t seem to edit any of the content, such as a text block, because every time I click into the text block to edit, Webflow automatically selects the overlay wrapper layer.
Is there a workaround for this or a way to lock / hide the overlay layer so that the rest of the content can be edited?
UPDATE#3: It seems changing the overlay container’s z-index to -1, allows me to select the rest of the containers. Still seems a bit of a weird workaround.
UPDATE #2: Well that was a short lived solution. I tried to select another text block and again it automatically selects the overlay element that has a fixed position, even though it’s z-index is set to 0
UPDATE: Ok- since posting I think I found a work around, I switched the overlay containers z-index back to 0 and I am able to now select the content below. This will allow me to work, but every time i want to test, I will have to select that container and switch the z-index and opacity. This is a little cumbersome. What would be great in future releases, would be able to select elements and “hide” them, so that other elements can be worked on.
Hey @kbowman Could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster
Sorry, I actually put a screen shot in the post but forgot to hit update. I can provide a read only link but please note that I am currently using the aforementioned work around of setting the overlay element to -1 on z-index to access the rest of the content.
Hi @kbowman, thank for the link to the site. While using z-index works, another easier method is to set the overlay to display none while working with other elements. Set display none in the Style panel for the overlay wrapper class.
Remember to set the wrapper back to the original display before publishing.
In the interaction that shows the overlay, make the first step change the display of the overlay back to display block (or whatever display style desired).
