Jump to content

Lightbox and Drop-Down Nav


Recommended Posts

I've run into a problem.  I'm using your lightbox coding on our website (and it works great!), but I've run into an issue with the drop-down navigation.  With everything set up the way it's supposed to be, the drop-down nav drops behind the thumbnail div.  I've tried various ways to bring it to the top, but they all prevent the slideshow from launching.  Got any ideas?

Link to comment
Share on other sites

Since I'm not sure how you've combined and styled the lightbox and drop-down navigation, you'd need to provide a snippet of code for us to pinpoint exactly what's going on.

I have a hunch that your z-index on your drop-down nav needs to be set to something higher. For highest z-indexes I use something like 500 just to be safe.

However, without the code, I couldn't be sure.

Link to comment
Share on other sites

Here's how I have it right now.

nav { 
    height: 60px;
    width: 100%;
    padding: 0;
    background: #da002b;
    background-image: linear-gradient(to bottom, #da002b, #730000);
    z-index: 100;

. logo{
    margin-top: 0;
    margin-left: 0;
    position: absolute;
    z-index: 99;

.section-center-gallery{     [this is the div with the thumbnails]
    position: relative;
    width: 75%;
/*    height: 100vh;*/
    padding: 20px;
    padding-bottom: 140px;
    margin: -0 auto 0 auto;
    background-color: #f9f0d8;
    z-index: 1;

.modal {            [this is the pop-up slide show]
  display: none;
  position: fixed;
  z-index: 50;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;


Even with this, the drop down options fall behind the div with the thumbnails.  No other divs have a z-index. Thanks.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...