Responsive-Lightbox
Responsive-Lightbox copied to clipboard
z-index conflict with Bootstrap navbar-fixed-top
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
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).
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?
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.
I tried to use navbar and lightroom in bootstrap site but only either of them is working. Both of them are not working simultaneously.