Lightbox Over Fixed Navigation

Hi all!

I have a fixed navigation with interactions. I also have 3 Lightbox links. The problem is that the top navigation it’s overlapping the slideshows whenever I open them. I tried setting the z-index higher for the lightbox links but didn’t work. I’m wondering it’s because of the interactions?

I appreciate all the help!


Here is my public share link: https://preview.webflow.com/preview/ruth-roche?utm_source=ruth-roche&preview=3ca9f6ed172b68cbfadeac4d99dbd37f

http://ruth-roche.webflow.io/

1 Like

Okay, I’ve got this.

For some reason, you’ve set ridiculously high Z indexes for your nav menus. I lowered then to 5 and 4 and it works perfectly. It seems that the lightbox index by default is something lower than 2000 or 3000, making it “lose” to the nav menu.

You could have solved that problem using animations: when you click on the lightbox image, the navbar would become transparent, and then when you leave the lightbox, it would get its opacity back.

Anyways, now that we figured out the problem, let me just write down the fix in a simple manner:

1) Give the "navtrans " class a Z-Index of 4
1) Give the “Nav Bar menu” - “Port” combo-class a Z-Index of 5

And voilá, your problems are solved.

I hope this helps. Have a great day my fried!

1 Like

I am currently working on a site with the same issue but I’d prefer to use the animation route since I think it would look cleaner if the navbar was hidden when the lightbox is open.

The problem I’m running into is that I can animate using a click on the lightbox as a trigger to hide the navbar, but clicking the “x” to close the lightbox doesn’t seem to count as a click on the lightbox. I can’t seem to find any way to use the “x” to trigger the animation that will show the navbar again once the box is closed.

Any ideas?

Hey @LePace did you find a solution to this?