Search code examples
csstwitter-bootstraplightboxblueimpbootstrap-lightbox

Bootstrap "navbar-fixed-top" causing issues with Blueimp photo gallery in fullscreen


After adding a "navbar-fixed-top" class to my Bootstrap nav and then clicking on a photo in the Blueimp lightbox gallery, the navbar is not hidden underneath it. It appears overlaid on top of the lightbox in fullscreen. This will cause the problem:

<nav class="navbar navbar-default navbar-fixed-top">

The below code functions as expected with the navbar being obscured underneath the lightbox overlay:

<nav class="navbar navbar-default">

Note that this is only happening on Chrome. Image gallery in Firefox and Safari are both functioning as normal with the fixed nav bar enabled.

Any thoughts on how to fix this? It's driving me nuts and no amount of troubleshooting has produced any solution. Thanks in advance.

my site

blueimp gallery documentation


Solution

  • It looks like there is a conflict when you combine and minify your animate.css with blueimps css.

    Removing the animate portion of your css let the modal overlay the fixed navbar.