Hi fam,
I’m trying to create a pop-up modal on the hero, and it needs to sit over a sticky navbar. I tried lowering the z-index on the navbar a little and make the modal higher but it doesn’t seem to be working. Any advice on how to accomplish this?
Thanks so much in advance
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi again,
I may have found a solution, I set the sticky navbar z-index much lower this time around 3 and any interfering items at 0. This seems to work but would love to hear any feedback, if there’s something better I could do instead.
Hey @MonicaGeller
There’s no read only link, but assuming. Ideally, you want to keep modals outside of any other divs or sections. Place it on its own, make it absolute: cover. Give it slight dark color. Then center everything. Remember the “lower” in the navigator stack - it’s higher on screen to view. The “higher” in the navigator (closest to the body tag) - more behind it will be on the screen.
You can add absolute to make it covers the entire viewport. And on smaller screens it will cover all the way down the screen. Then add flex, center, center and drop your content there. This will ensure it stays in the middle of any viewport.
So place the modal at the bottom if you don’t want to deal with z-indexing. Hope that helps.
G.J.