Issue with modal over sticky section

Ask us anything
1

I’d like to have a sticky nav on mobile. When I add a z-axis to the nav, I cannot set my signup modal to appear full-screen in front of the nav.

Page on load:
image

Sticky nav without z axis, lower sections cover it:
image

Sticky nav without z axis, signup modal fills screen:
image

With z-axis on sticky nav, modal appears behind:
image

I tried changing the z-axis of the flexbox inside the modal but no luck. I cannot change the z-axis of the modal itself. I tried just moving the modal down but it looks messy and doesn’t function as well.

Am I missing something? Not sure if there is a code fix, would need to be specific to mobile.

Thank you

2

Hello @foliodc,

If you want your modal over your sticky header, it’s possible. The default Z-axis for the modal is 30, so if you have Z-axis of your header under this value, your modal will be over it

If you want to have your modal under your sticky header, I think the best way is to add a margin top to your modal

2 Likes
3

Thank you that fixed it!

1 Like