Problem with enlarged images in gallery

Hello,

I have a gallery on this page, but when you enlarge the images in the gallery, the upper part of the images are displayed behind the menu at the top of the page.

Is it possible to add some extra CSS code so that the menu at the top of the website gets behind the enlarged images instead (in the gallery)?

The enlarged images in the gallery should be displayed as follows:
https://visualportfolio.co/tiles-popup-gallery/

Thank you in advance!

Kind regards,
trew

Hello,

Images are displayed like in provided example, except that images with larger height will appear larger, and because of sticky menu you are seeing large image behind it. You can only try to lower all enlarged images by some amount, and also to limit this to larger screens. Try to add following css code from Appereance > Customize > Additional css field:

@media screen and (min-width: 1366px) {
.pswp {
    top: 51px;
}

}

and image should start from where menu ends https://www.screencast.com/t/Eqkk4AFqwX

Best Regards!

Hello,

Thank you for your reply!
It is not that kind of solution as I wanted. When you have enlarged an image in the gallery you can click on it to enlarge the image one more time, so that it becomes even bigger - and then you have the same problem again. I want to be able to show big pictures in the gallery.

I have tested other gallery plugins and I noticed that at least one of them did not have this problem at all - the enlarged images showed in front of the menu instead, in that way as it’s expected to work (the menu was not visible when the images were enlarged).

There are different possibilities with different gallery plugins and I really like this one that I use - except that the pictures are not displayed on the upper edge when they are enlarged! But I guess there is a solution on that …

I hope someone can help me to solve this!!
Thanks in advance!

Hi again,

Remaining option is to hide menu and content by setting higher z index for enlarged images holder, and you should be able to do that with css below:

.vp-pswp, .vp-fancybox {
    z-index: 9999;
}

With that code you won’t be able to see header https://www.screencast.com/t/JwK1DPW8wSw

Regards!

Hello again,

Thank you so much for your help!!
This is absolutely amazing!! It works great!! :+1::+1::+1:

Thank you very much!!

Kind regards,
trew