Make div appear on top of everything but elements under it should be clickable

Design help General
1

I am trying to implement a night light for the website which will apply a orangish tint on the entire website. Issue is that right now, once the tint is applied as a div block on top of everything, I am unable to click anything that is under that overlay.
Is there a way to make it so that every element under it will be clickable but the div block still appears on top of everything?

Thanks

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi @Namit_Singh and welcome :webflow_heart:

First - Share your read only link so the rest of us can dive in to try to solve your issue. If You are not aware to the Z index parameter, read this from Webflow university all about Z index the value controls the stack order of an element. Hope it helps :slight_smile:

3

Here’s the link: https://preview.webflow.com/preview/looseleaf-website?utm_medium=preview_link&utm_source=designer&utm_content=looseleaf-website&preview=ef4388384ce325d7f3c636739012906d&pageId=5f12ce9eb156a2467169e923&mode=preview

I tried to set the Z index to like 1000 but that makes everything else unclickable.

4

Hi

Now that We all have access to the read only link, can you elaborate and show where (page) you try to implement and What you try to implement?

5

Thanks for sticking around, but we decided to scrape that feature. But in case for future, on the dashboard page, I was trying to get the moon icon button (on the top right) to enable a yellow tinted overlay on the entire webpage as a nightlight. But doing so was making everything else unclickable. I have named the div block “Nightlight Div” right under the Body of that page. Currently its hidden by default.

6

Hi

Is it what You looking for?

https://www.loom.com/share/4eb09cbcfbfa47f2afeb36ffee2f36a9

If so…
https://www.loom.com/share/02c6ac6801b84a8b878fae3c6e0ee061

Hope it helps:-)

7

Sorry for the late response but yeah this is what I was looking, thanks a lot for the thorough video!

8

Do you still have the loom links for these? I’m needing the solution, but the links don’t exist anymore.

9

Hi Keithen

No I’m sorry - I was on the free tier of loom

10

I’m also VERY interested in this!
I have a mostly-transparent element I want to overlay everything to make the lighting look good, but still want everything on the page beneath to be interactable.
Thanks in advance to anyone willing to post a solution to this!

11

Nevermind! I found a solution here:

To summarize what I learned:
you have to:
1. Set the element index to 9999
2. Set the curser-event to NONE for the layer (bottom of style panel)
3. Enter some custom code into the header of your document (given in link above)
4. Set class of layer to “my-overlay” (as dictated in forum mentioned above)

My props and eternal thanks to CyberDave for solving it!

1 Like