Repository navigation
Navigation Block: Overlay Z-index nesting issues with consecutive cover blocks #75439
Description
_This is a core issue: https://github.com/WordPress/gutenberg/issues/45353_
Feel free to use this issue for tracking WordPress.com Customer reports. - cuemarie
Quick summary
If a navigation block is nested in a cover block, and there is a cover block after it on the page, the contents of the second cover block will show on top of the navigation overlay.
Both the header and content immediately after are in cover blocks here:
In this case, when expanded, the navigation overlay sits underneath the second cover block.
If there is an image in the second cover block...
...the navigation overlay will overlap the image, but not the overlay or the text.
Setting a background color for the cover block creates an opaque overlay, so that does completely cover the navigation section.
If the navigation block is not within a cover block...
then the overlay loads correctly.
Steps to reproduce
- Create a navigation menu within a cover block.
- Enable the overlay option for the menu.
- Create a cover block as the next element on the page, add text and overlay to this block.
- Expand Navigation hamburger.
What you expected to happen
The navigation menu should become the top element on the page.
What actually happened
The navigation overlay sits underneath the second cover block's overlay. I believe the z-index settings of the navigation block's parent cover block overlay take precedence over the navigation block's settings here.
Setting the z-index for the cover block's inner content as a number greater than 1 seems to fix the issue. Since this is generally the first cover block on the page, a CSS workaround that might work is:
.wp-block-cover .wp-block-cover__inner-container:first-of-type, .wp-block-cover-image .wp-block-cover__inner-container:first-of-type {
z-index: 2;
}
Otherwise, a different layout for the second element of the page or the header may be necessary.
Noticed in ticket here:
6174732-zen
Impact
Some (< 50%)
Available workarounds?
Yes, easy to implement
Platform (Simple and/or Atomic)
No response
Logs or notes
No response
Activity
github-actions commentedon Apr 7, 2023
Support References
This comment is automatically generated. Please do not edit it.
cuemarie commentedon Apr 7, 2023
📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain
📌 FINDINGS/SCREENSHOTS/VIDEO
Screenshots/Recordings
Nav block OUTSIDE of cover block, in Editor
Nav block INSIDE of cover block, in Editor
Live Site
Nav block INSIDE of cover block, in Editor, no 2nd cover block
Live Site
📌 ACTIONS
/gutenberg: [Block] Navigation nested inside [Block] Cover results in Z-Index issues with other cover blocks WordPress/gutenberg#49668Gustavo-Hilario commentedon Apr 25, 2023
Another report here: 6223970-zen
Theme: Blank Canvas
I could reproduce this on a test site. In this case, the submenu is getting cut off at the bottom of the cover block.
masperber commentedon May 3, 2023
38262835-hc I had a customer report the same issue that @Gustavo-Hilario reported. That is: when a Navigation Block is nested inside of a Cover Block, the submenu is cut off at the bottom of the Cover Block.
21 remaining items
nazilya06 commentedon Oct 10, 2024
Another report: 8849232-zd-a8c
Advised to replace the Cover block behind the Nav menu with a Group block. Then add a Background image to the Group block.
davemart-in commentedon Oct 14, 2024
Removing groundskeeper label since this has been picked up.
renatho commentedon Oct 17, 2024
Closed with WordPress/gutenberg#66093
nazilya06 commentedon Jan 16, 2025
User reported same issue here: 9291659-zd-a8c. Reopened the bug report. I was able to replicate the same behavior on my test site.
Same as described by @Gustavo-Hilario here.
happychait commentedon Feb 3, 2025
A user encountered the same issue in 9364248-zen
Worked around by transforming the Cover blocks to Group blocks.