How can I click below transparent divs in Webflow?
TL;DR
- Apply
pointer-events: noneto the transparent div to allow clicks to pass through. - Check and adjust the z-index to ensure clickable elements aren’t visually or positionally blocked.
If you're unable to click elements beneath a transparent div in Webflow, it's likely due to the transparent div still intercepting pointer events.
1. Use pointer-events: none on the Transparent Div
- Select the transparent div in Webflow Designer.
- In the Style panel, scroll to the Custom CSS field or use a custom attribute.
- Add the following using custom code or via a custom attribute:
- Add a custom attribute:
- Attribute name:
style - Attribute value:
pointer-events: none;
- Attribute name:
- Alternatively, use custom code in the page or site settings by inserting
pointer-events: none;via an Embedded Code block.
2. Verify Z-Index Hierarchy
- Ensure the transparent div is not placed above other elements with a higher or equal
z-index. - If necessary, reduce or remove its
z-index, or lower its position in the Navigator hierarchy.
3. Confirm Opacity Isn’t Blocking Interactions
- Even if a div is styled with opacity: 0 or background transparency, it can still block clicks.
- Only setting opacity or background: transparent doesn’t allow clicks to pass through – you must use
pointer-events: none.
4. Only Disable Pointer Events When Needed
- If the div contains elements that need to remain interactive (like buttons), don’t apply
pointer-events: noneglobally. - Instead, apply it selectively to specific layers that should allow clicks to pass through.
Summary
To click beneath transparent divs in Webflow, set pointer-events: none on the transparent div to let clicks pass through. Also, manage z-index properly to ensure clickable elements are above or not obstructed.
