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

Home Forums Support FooGallery images are displayed on top of primary navigation

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #303423
    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

    GP Premium 1.2.96
    #303471
    Tom
    Lead Developer
    Lead Developer

    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?

    #303486
    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

    #303538
    Tom
    Lead Developer
    Lead Developer

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

    #303615
    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

    #303692
    Tom
    Lead Developer
    Lead Developer

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.