Streaming live at 10am (PST)

Nav bar and modal not getting along

#1

Hey everybody!
I’ve been working on a gallery page for my site, and have run in to a pesky little issue between my modal and my nav bar.
When I click on an image, the modal opens up (as it should), and is supposed to be completely on top of everything.
As it is now, when the images that are towards the top of the gallery are clicked, the modal half-opens underneath my nav section.
I tried messing around with the z-index, but when the modal works properly, my nav drop-down goes behind the div that contains my gallery (effectively making the menu hidden).

Any and all help will be greatly appreciated!

Thanks,
Scott


#2

Hi @Scott

I’m happy to help :slight_smile: Can you please provide your read-only link?

thanks in advance.

#3

Whoops! Forgot about it :slight_smile:
Here it is (after the 10 minute cool-down for posts :sleeping: )

https://preview.webflow.com/preview/website-88a3d1?utm_source=website-88a3d1&preview=1def0a8281856545ed5c07e3828e13e0

The aforementioned issue is on the ‘Gallery’ page

#4

Hey @skoebl,

You should do this

Since your navbar is not fixed you don’t need zindex on it,
Hope this helps,

#5

So that fixes the issue of the modal not popping up on top of everything, but when I click on the menu button in the mobile views my menu drops behind the gallery images.

I have a secondary issue that’s more of a curiosity rather than a problem. I set up a second collection list below the first (with actual images I intend on using), and have an issue where the modal from the first collection list is falling behind the second collection list. The modal from the second is on top of everything (which is how it’s supposed to be).

I have a feeling both of these are related issues, and maybe have to do with the modal being tied to the collection list/item, rather than the containing section?
(edit: I just realized that I only have the second problem in the mobile modes, it’s fine on desktop)