clickable objects under fixed sidebar, is it possible?

[xdigito]

Hi LM fans,

me and a colleague of mine are trying to make a fixed sidebar with a transparent background.
We would like to always see the buttons to navigate the plan, but still have the possibility to click the objects under the (transparent) sidebar.

Making the .menu element transparent in the CSS was the easy part, but the problem is that the .menu item has a z-index of 200 while the objects have a lower z-index value.
What happens is that even if the .menu background is not visible, it's still there from top to bottom of the visualization and prevents you to click the buttons underneath.

I tried changing the z-index of the objects in the CSS (attachment), but it doesn't work.
Do you have any idea on how to get around this?

Thank you very much for any feedback!

[admin]

Use pointer-events CSS property, set it to none for elements that should not react to clicks, set it to all for elements that should react to clicks.

[xdigito]

Use pointer-events CSS property, set it to none for elements that should not react to clicks, set it to all for elements that should react to clicks.

Thank you admin, nice trick!

This is the code I used, and it works:

Code:

.menu {
 pointer-events: none;
}

.menu * {
 pointer-events: all;
}