Overlay Lacks Close Button in Firefox, Doesn’t Go Back to Collection

Umm… I am seeing an “x” at the top right corner of your page when I open the overlay. Are you not seeing that? Do you have your WP Admin Bar turned on for logged in users? If you do, that will not let you see the “x”. Note that visitors of your site will not see the Admin bar (as they are not going to be logged in), so from a testing point of view it makes sense for you to disable the admin bar.

You’re right, when I logged out the X displayed in Firefox – thank you.

The overlay being covered by the navigation in FF is still an issue, as is not returning to the collection when the overlay is closed.

You’re right, when I logged out the X displayed in Firefox – thank you.

When you are testing you don’t need to log out. You can set this via the “Toolbar” setting under Users → Your Profile in your WP dashboard.

The overlay being covered by the navigation in FF is still an issue

Your theme seems to be setting a very high number for the z-index on its navigation bar. You can add this to Appearance → Customize → Additional CSS via your WP dashboard:
photonicModalOverlay {z-index: 10000; }

as is not returning to the collection when the overlay is closed.

Actually the problem is getting triggered right after the overlay is opened – the gallery underneath is going blank. When I look at the markup of the page in Chrome or Firefox inspector, I see that all the markup is there. This is the first time ever that I am seeing this happen (and Photonic has been around since 2011!), so that made me curious.

It looks like there is some sort of a clash between your theme’s markup and Photonic’s markup for the overlay – basically your theme seems to be using “absolute positioning” for its main content, which is highly unusual. When Photonic’s overlay (something that uses “fixed positioning”) is showing up, the theme’s content is somehow losing its positioning and that is causing all content to apparently disappear.

I cannot help solve this, as this will need fundamental changes to the overlay, which has been working without issue for over 5 years now across multiple themes, including those with a layout similar to yours. Your only alternatives may be to use a similar looking but different theme, or to ditch the overlay for a dedicated gallery page (Example 3 here).

Thank you so much!

I was able to resolve the issue of returning to the collection by adding this to the CSS:

#page {
position: inherit;
}

In case anyone else might experience this issue, the theme is called Catch Vogue