Streaming live at 10am (PST)

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

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)

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:

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.

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?

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.

Hi

Is it what You looking for?

If so…

Hope it helps:-)

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