Repository navigation
Navigation block: overlapping(z-index) issue when nested inside Cover Block #79317
Description
Quick summary
While having an overlay menu opened, the slideshow block shows up on top of the overlay.
Steps to reproduce
- Activate a block theme(tested with Blank Canvas, 2023, Quadrat)
- Open the default page template
- Set a Cover block in the header with a smaller height. (20-40vh)
- Set the navigation block's overlay menu to "alaway".
- After the header template part, add a slideshow block(or multiple, I don't judge)
- Publish the changes and open the menu
What you expected to happen
To see the navigation menu correctly
What actually happened
This happened: 
(yes that image is from the slideshow)
Browser
Google Chrome/Chromium, Mozilla Firefox, Microsoft Edge
Context
No response
Platform (Simple, Atomic, or both?)
Simple
Other notes
Found that in Slack while trying to help with CSS: p1687930863677319-slack-C03TY6J1A
I only tested this on Simple websites and on a Pressable website.
The issue only manifested on the Simple sites, using the same themes.
Reproducibility
Consistent
Severity
Some (< 50%)
Available workarounds?
Yes, difficult to implement
Workaround details
CSS is the only thing I could suggest.
The most straightforward method is to add a class to the cover block, then add this CSS. If "fixclipping" is the class, add:
.fixclipping {
overflow: visible;
}
Or you can select in other ways. In Slack we used:
/* adjust the z-index on the slideshow | xxxxxx-zen */
.wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container {
z-index: 99999;
}
(edited to add the class method since the other wasn't working consistently for me)
Activity
github-actions commentedon Jul 10, 2023
Support References
This comment is automatically generated. Please do not edit it.
cuemarie commentedon Jul 12, 2023
📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain
📌 FINDINGS/SCREENSHOTS/VIDEO
wp-block-jetpack-slideshow_container
wp-block-navigation__responsive-container hidden-by-default has-modal-open is-menu-open
The Cover block is the key difference, and the cover block also has a
z-index: 1, and that z-index is likely what's causing problems. There are a few open issues about this in/gutenbergsuch as:Screenshots/Recordings
Simple Site, with Nav Block inside Cover Block:
Same site without Cover Block:
📌 ACTIONS
[-]Navigation block/Cover block & Slideshow block: overlapping(z-index) issue[/-][+]Navigation block: overlapping(z-index) issue when nested inside Cover Block[/+]6 remaining items
vinnykaur commentedon May 3, 2024
One more: 8082235-zd-a8c
upwardmomentum84 commentedon May 11, 2024
Related issue: 8173661-zd-a8c
The submenu on mobile was being overlayed by the Cover block below it. I added a CSS class to set the Cover block that contained the menu to have a high z-index and this resolved it.
hngdny commentedon Jul 1, 2024
Related issue: 8380863-zd-a8c
Used the workaround to set custom CSS class + high Z-index
supernovia commentedon Sep 12, 2024
We have a case here:
8702470-zd-a8c -- user isn't actually doing anything with the cover block anymore, so I'd recommended not using it and reverting back to a version that works, but we can add the CSS if user responds affirming they want it
mrfoxtalbot commentedon Sep 13, 2024
As a workaround, we can recommend users they replace their cover block with a group block, now that group blocks support background images. I tested it and the dropdown menu shows outside the group block without any issues:
Kapture.2024-09-13.at.15.08.41.mp4
supernovia commentedon Sep 17, 2024
I've got another case here.
8715843-zd-a8c
supernovia commentedon Sep 17, 2024
I've just tested this on a simple site + personal plan; alas I couldn't get it to work.
supernovia commentedon Oct 2, 2024
Another case here: 8772803-zd-a8c
supernovia commentedon Oct 7, 2024
This might be a duplicate or likeness of this issue:
#75439
renatho commentedon Oct 8, 2024
Yes! I just checked that the issue with the Slideshow is also fixed with the same PR.
renatho commentedon Oct 8, 2024
As suggested by @supernovia it's duplicate (#75439), so I'm closing it.