project overlay to cover menu

[nypaloto]

I'd like a project overlay to cover (hide) the site title and menu, so there is only the closing "X" visible when viewing a project overlay. Is that possible? Thanks!

[arminunruh]

.lay-project-overlay{
z-index: 20!important;
}

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

try this!

NOTE:
this is the correct css not the one above

#lay-project-overlay{
z-index: 20!important;
}

[rospax]

Hi @arminunruh, I'm trying to achieve this as well.
The above doesn't seem to work, no matter what i put for the z-index of the .laynav elements and the .lay-project-overlay elements, the nav is always visible above the overlay...

What could i be missing?

[arminunruh]

#lay-project-overlay{
z-index: 20!important;
}

i made a mistake, this should be the correct css!

[craigfeldspar]

Hi @arminunruh, thanks, it works on desktop but not on mobile, could you please help me?

[arminunruh]

Okay. Well, then, if you want it for mobile, you have to not just enter it in custom CSS for desktop but also in custom CSS for mobile.

.close-projects-overlay{
z-index: 90!important;
}
#lay-project-overlay{
z-index: 89!important;
}

[craigfeldspar]

Thanks — of course I had already tried that, as well as testing it in custom code before posting. However, since the preview in 'Customize' didn’t reflect that code, I thought it wasn’t working. But after testing it across several browsers, it turns out it does!

[arminunruh]

Oh don't worry about it. For mobile, it was a little different. We had to use a higher z-index and also use a z-index on the close icon, so it's understandable that it seems like it doesn't work at first.