Responsive-Lightbox icon indicating copy to clipboard operation
Responsive-Lightbox copied to clipboard

z-index conflict with Bootstrap navbar-fixed-top

Open iversoncreative opened this issue 11 years ago • 4 comments

Thanks for sharing this simple and lightweight plugin.

I implemented this lightbox on a Bootstrap built site and noticed a conflict with the navbar-fixed-top. Though the navbar was fading back, the close button was hidden beneath it, and images that were tall enough were being cut off by it. I added a z-index to the #lightbox and it's fixed.

Otherwise, works perfectly. Again, thanks.

  • P

iversoncreative avatar Aug 21 '13 14:08 iversoncreative

I've added

#lightbox { z-index:99999; }

and this issue was fixed. See working here: http://blogdaengenharia.com/como-consegui-uma-calculadora-grafica-de-graca/ (click in the first image of the post).

DouglasdeMoura avatar Dec 04 '13 13:12 DouglasdeMoura

I'm having this issue on a non-bootstrap site.

Using a fixed header with a z-index of 98, it's still sitting on top of the close button, even though it's set to 9999. Something else at play?

nathanhornby avatar Feb 08 '14 17:02 nathanhornby

I ended up fixing this by giving the .lightbox itself a z-index.

So z-index order ended up being forced to:

.lightbox-button
.lightbox-caption
.lightbox
header

I'll push a change over, but might need testing.

nathanhornby avatar Feb 08 '14 17:02 nathanhornby

I tried to use navbar and lightroom in bootstrap site but only either of them is working. Both of them are not working simultaneously.

quizclubiitindore avatar Jul 14 '14 10:07 quizclubiitindore