[Resolved] FooGallery images are displayed on top of primary navigation

[Timo]

Hi there,
I’m facing the problems with FooGallery in combination with the Primary Navigation of GeneratePress.
During scrolling down in FooGallery gallery the primary navigation (see before and after images) appears in the background, however the gallery should appear in background and the menu should stay in the foreground (like at the wordpress admin bar area).

You can try it yourself here, may be the page has been moved to the root directory in the meantime, so also try this link.

How can I fix this?

Cheers
Timo

[Tom]

Hi Timo,

Looks like a z-index issue.

However, it looks fine to me: https://www.screencast.com/t/gKDCuy41oRT

Did you get this resolved?

[Timo]

Hi Tom,
to reproduce this bug you need to click on a gallery (for example “Erstellung Webseite (Anfang 2017) :)”).
Sorry for the unclear description!

I’ve looked in firebug at the z-index attribute and found out, that the wordpress admin bar has a z-index of 99999 and the images of FooGallery a z-index of 9999.
It seems that the primary navigation bar of GeneratePress does not set this attribute at all.
So I would like to set this attribute at least to 10000.
What’s the best way to modify the CSS for that?

Cheers
Timo

[Tom]

Hmm, getting an error now while trying to view the site: https://www.screencast.com/t/Lx9ye7Bs7lF

[Timo]

Strange, the domain provides https normally. Anyway, I fixed this issue finally by putting this under additional CSS:

#sticky-navigation {
	z-index: 10000;
}

However I’m not sure if this is a good idea, because it’s a class not an id. I tried to modify the z-index attribute of the id by adding this to additional CSS, but this sadly had no effect:

.main-navigation {
	z-index: 10000;
}

Cheers
Timo

[Tom]

That first snippet is fine, and is probably what I would have given you 🙂

[Author]

Posts