CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vitor Lima
Vitor Lima

Reputation: 83

How to fix a Lightbox gallery overlaying the site's header?

I'm making a website with a Lightbox image gallery on it. Everything with the gallery and the layout of the page work works perfectly except for one thing. In desktop view, it's working, but when I try to open it on a phone (or reduce the width of my browser window to the minimum) the lightbox gallery overlays the header menu of the site.

I will provide the HTML and CSS I made to put the header and in their place.

I tried using position fixed absolute and realitive on the header but it didn't work. I have no idea how to fix this to be honest.

The HTML of the header:

<header>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="shiatsu.html">Shiatsu</a></li></strong>
            <li><a href="holistica.html">Terapia Holística</a></li>
            <li><a href="cristais.html">Terapia com Cristais</a></li>
            <li><a href="pantala.html">Pantaloterapia</a></li>
        </ul>
</header>

The HTML of the gallery:

<div class="gallery">
    <a href="images/holistica/1.jpeg" data-lightbox="galeriaholistica"><img src="images/holistica/1.jpeg"></a>
    <a href="images/holistica/2.jpeg" data-lightbox="galeriaholistica"><img src="images/holistica/2.jpeg"></a>
</div>

The CSS of the header:

header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    height: 100px;
    width: 100%;
    background: #f9f3ff;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
}

The CSS of the gallery:

.gallery img {
    width: 100%;
    max-width: 230px;
    height: 230px;
    margin: 10px 10px 0 0;
    filter: grayscale(100%);
    transition: 1s;
}

.gallery img:hover {
    filter: grayscale(0);
    transform: scale(1.1);
}

I didn't modify the javascript of the lightbox the code is very long, you can see it here: https://lokeshdhakar.com/projects/lightbox2/ I used the lightbox-plus-jquery.min.js.

How can I make so that when the user scrolls down in mobile view, the header overlays the image gallery?

Upvotes: 1

Views: 1262

Answers (1)

zesak
zesak

Reputation: 76

It seems a problem of z-index. Looking at the CSS styles of lightbox (.lightboxOverlay with z-index: 9999 and .lightbox with z-index: 10000), it would be enough to add a z-index: 10001 or more to the .header styles.

Upvotes: 2

Related Questions