keep site title and navigation showing with lightbox feature

[yelmarb]

Hey @arminunruh

I love the lightbox add on feature but I would like to keep the site title and navigation showing, but still have the grid opacity work.

Could this be done with some CSS code?

[arminunruh]

.sitetitle, .laynav{
z-index: 999!important;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

[yelmarb]

That's perfect, thank you so much Armin!

[yelmarb]

If anyone needs the mobile CSS code its:

.mobile-title, .lay-mobile-icons-wrap{
z-index: 999!important;

}

[yelmarb]

Hey Armin, 2 questions for you:

I would like to have some padding for the lightbox so the image doesn't overlay the menu. So far I have come up with this:

body.lightbox-css-on #lightbox-region {
padding-top: 30px
}

However, this pushes the Lightbox down the page and the bottom of the image is then off center.

What's the best way to keep the Lightbox with 30px of top AND bottom padding but still keeping 100% width?

Also, where's your tip jap / buy me a coffee / patreon??

[arminunruh]

i have a paypal :D

armin.unruh@gmail.com

please dont send more than 5€, this support here is included in the price of lay theme ^^

if you want me to do more extensive programming for a website, like you need many customizations or even custom lay theme elements, you can write an email to me and i can create a cost estimate

doing this is a little tricky. because the size of the image is calculated with javascript to have the right space at the top and bottom.
however, what you could try is this css which simply scales down the image while the space at the bottom should remain the same:

#lightbox-region .swiper-slide img{
transform: translate(-50%, calc(-50% + 20px)) scale(0.8)!important;
}

you can play around with 20px and 0.8

for different sizing and positioning