SuperTiny SuperTiny - 1 month ago 16
CSS Question

Make underlying sticky div clickable

On this page (Wordpress site), the pink element becomes sticky when it touches the menu. But this element is unclickable because of the logo on the left, which makes the menu wrapper higher, thus making the sticky element unclickable.

I can't use pointer-events:none on the menu div, because that makes the menu + logo unclickable.

Also, z-index is no use as the sticky element is nested in the content wrapper. So if I'd make the z-index of the content higher than the menu, the content will scroll on top of the menu.

I should probably separate the sticky element from the content wrapper, but as I'm no expert with the Wordpress wireframes, I don't know how.

Or are there any other tricks I could try?

Answer

If you just set the class fusion-logo to position: absolute the logo container won't follow the normal flow of the element, so that fusion-header height will be the same of the navigation menu and the pink element will be right below to it, clickable