Photo Seller – Lightbox appears under theme menu bar

[mpachis]

I’m using the Divi theme from Elegant Themes with PhotoSeller. If I use gallery theme 9 or 10 the FancyBox “pops under” the Divi menu bar so the top quarter of the lightbox is covered by the menu hiding the close window widget under the theme menu. Is there css I can add to change the lightbox behavior?

Thanks.

[Peter]

Can you please provide a link to the gallery page so I can inspect the issue from my browser?

[mpachis]

Unfortunately it is a localhost instance running under Bitnami right now. When I deploy it I will post again.

Thanks

[C]

10 beers says that it is a z-index issue. Your header -especially if it is a sticky header, probably has a css setting for z-index.

You likely need to set a CSS rule for

#jquery-lightbox: X00;

where X00 is greater than the z-index of your header, it has to be a number higher than the header that is currently hiding your lightbox.

Cheers!

Chris

[Peter]

Yep that’s right Chris – it probably is a z-index thing. It’s just a matter of inspecting the actual page via firebug so we can determine what the best custom css code should be for this situation. (every theme and site has different quirks)

[mpachis]

C & Peter, thanks for the tips. I found the element for the Divi menu and added custom CSS to change the menu to a lower z-index value than the FancyBox and it works now!

Michael

[Peter]

Ok that’s good to hear!

[Peter]

Hi Michael – that’s good to hear!

[logosi]

mpachis could you share the code you used for Divi? I’m in the exact same situation, however I’m not as savvy as you when it comes to custom CSS. Thanks.

[Peter]

Please provide a link to the page which needs the CSS so I can take a look.

[admin]

@logosi, I have replied via email.

[starsphinx]

I am having the same issue using the vantage theme and page builder from site origin. I have no idea what Z index means or where to add the necessary custom CSS – will it go in the custom CSS section under appearance

Site is http://www.starsphinx.com and the problem can be seen on any of the galleries under the sport album with the albums being under galleries from the main menu

[Peter]

The following custom CSS should fix it:

.fancybox-overlay{

z-index: 9999;

}

You can try putting the above in your theme’s custom CSS section. If that doesn’t work let me know.

[starsphinx]

I put it in the custom CSS section but it did not work

[Peter]

Go and grab the following plugin:

http://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

and try again.

[Author]

Posts