My menu tabs show in front of the jquery image hover overlay

Q: I am building a new website for my flying club and really like the Lightbox effect for
showing our member photos. However, I’m having a problem because my menu tabs show in
front of the lightbox overlay. I did a google search and found that others have been
advised how to change this by raising the z-index for the overlay.

I have been unable to find where to do that. I am using XsitePro to develop the web
site and I’m not sure where it hides all its html so I don’t think that I can change the
menu z-index. I did find html code in the Lightbox program library and tried to change
the “standard” file to see if that would work, but I got errors when I tried to save the
changes. Also, I’m not an html programmer, so I’m hoping not to have to be changing too much code.

Your product is very good and I am hoping that you can help me get this issue resolved.
I will use Lightbox anyway, but I’d rather not have a lot of questions about what can be done about the menu tabs.

A: You should find the following code in engine/css/visuallightbox.css file:

#overlay{
        position:absolute;
        top:0;
        left:0;
        z-index:90;
        width:100%;
        height:auto;
        background-color:#000000;
}

#lightbox{
        position:absolute;
        top:20px;
        left:0;
        width:100%;
        z-index:100;
        text-align:center;
        color:white;
        line-height:0;
}



and change it to:

#overlay{
        position:absolute;
        top:0;
        left:0;
        z-index:900;
        width:100%;
        height:auto;
        background-color:#000000;
}

#lightbox{
        position:absolute;
        top:20px;
        left:0;
        width:100%;
        z-index:1000;
        text-align:center;
        color:white;
        line-height:0;
}

Recent Questions »

Related