Popup Gallery close and share buttons not working

Hello, here’s a quick update. It has to do with the absolute positioning of .pswp__top-bar

I can change the top: position in css for the .pswp__top-bar and it works again but it’s hard to get a perfect position for all devices.

Without altering the CSS, the absolute positioning is causing the .pswp__top-bar to disappear behind my fixed menu area.

As soon as the bar goes slightly behind my fixed menu, the controls are no longer usable.

I tried playing around with the z-index of the .pswp__top-bar but that didn’t work either.

Do you have any other ideas that could get this working?

Many thanks,

David

Hi David.

Could you give me your site URL, so I’ll take a look?

Hi nK

Sorry for the slow response. I don’t like posting other people’s URLs on forums but I wonder if you have an email I could send the URL to?

I have created temporary fixes for both sites with the problem using CSS to move the controls down underneath the fixed menu sections.

The sites with the issue are both using the Divi template.

Many thanks!

Hi nK

If you have an email address I will happily send you links and logons to the sites I have the issue with.

I think the problem must be a new conflict with the theme Divi?

I’m also wondering if you have any code I could add and modify to make the Divi menu bar disappear when a gallery image is opened in lightbox?

It would need to reappear when the X is clicked and lightbox has closed.

Many thanks in advance!

Lanx

Hi.

Maybe the problem just in z-index value. Try to change it using custom CSS:

.vp-pswp {
    z-index: 1500;
}

You can experiment with the value, for example, try to add large number like 999999. If this will not help, you can create a private support ticket here – https://nk.ticksy.com/

Regards, nK.

Hi nK

Many thanks for the reply.

I managed to resolve this last night at the same time you replied : )

I had tried changing the z index of the .vp-pswp before but it didn’t help.

This time I took a closer look at the Divi #main-header and found it had a super high z-index set (maybe the highest possible).

I changed it to 1000 as I know your plugin uses 1500.

On one site I had to add the !important attribute.

Everything now works fine – it’s worth bearing in mind if you get any more Divi users with the same issue.

Thanks for your help and for the great plugin!!!!