How to handle overlay target that has absolute positioning?

[JamCodesSometimes]

Hi all,

for my project, I'm trying to highlight my side navigation, where there are two sort of navigations built: responsive, upper nav element, and bottom-nav user element that's "absolute" to the page. As my step target, I entered the class of the parent div, so both (as part of the nav) should be highlighted.

But I'm noticing a square where the bottom nav is, where the "blending" isn't quite right:

(The white on the RHS is the tooltip component)

I wanted to know if the position: absolute of the bottom nav is hindering things? Because Ideally, targetting the parent div for the side nav should cover both the navigation elements, right? Is there a work around for this?

[gilbarbara]

Hey @JamCodesSometimes

I can't understand exactly what's happening from the screenshot.
Is this related to the spotlight or the overlay itself? The overlay should have no gaps.

[JamCodesSometimes]

Hi @gilbarbara

Yes, that's how it's behaving, The overlay and spotlight seem to be using hard-light blend to show the target area within the overlay, and the blend seems to be dysfunctional in the bottom part of my Side Nav.

The only thing I can think of is the absolute positioning of my elements that are disrupting the normal behaviour, But wanted your input in this.

(I'll also try to mock a minimal version for your reference over the weekend, please take a look once I ping it to you?)

[JamCodesSometimes]

Hi @gilbarbara

Found a issue, one of the background properties for my element was messing with the overlay, it's fixed now! Thanks, you can close this issue.