FooGallery Album layers over top navigation and menus in Twenty Seventeen theme

Making a small CSS modification (please insert into your theme’s custom css area) appears to fix the header issue.

.foogallery-pile {
z-index: 0;
}

Because CSS is not my area of speciality I’ll have someone else on our team double check this solution and respond again if it needs to be tweaked further.

Regarding the album on your home page – are you able to insert an album link so we can look at the issue happening and provide assistance?

The recommended CSS modification above does not fix the layering issue. I tested in multiple browsers and on both PC & Mac. In all cases the FooGallery Album layers on top of the theme sticky nave dropdown menus.

Per your request I have inserted the same album on the home page … twice.
– In the upper instance the album is inserted using shortcode in the standard content area of the home page. In this case, the gallery links are incorrect and call up the default blog page error.
– In the lower instance the album is inserted instead using the WP Page created for the album (title = “portfolio”) in the Twenty Seventeen customization dashboard “Appearance > Customize > Theme Options > Front Page Section.” In this case, the gallery links work as they should.

Hi evollo,
I had a similar problem – drop down menu was going under the gallery.

Try to put this in your theme css:

.foogallery {z-index:0 !important;}

This worked for me.

The addition of !important does not solve the problem in our Twenty Seventeen theme installation.

hi guys,

The FooGallery album has a css style on each item which gives a z-index of 10:

.foogallery-album-gallery-list .foogallery-pile {
    position: relative;
    z-index: 10;
    float: left;
    margin: 10px 15px 15px 10px !important;
}

It is easier to adjust the entire header element (which includes your menu) to have a higher z-index than 10. I tested this custom CSS on your page and it works:

header#masthead {
    z-index: 100;
}

Brilliant!

Actually, not so brilliant. The CSS corrupts the home page parallax header image function. In the Twenty Seventeen theme, the normal function is for the nav bar to be positioned below the header image. As the page scrolls, the nav bar scrolls to the top of the page and becomes a sticky menu and the header image scrolls out of view. However, with the above CSS above, the entire header image sticks and covers up page content.