Navigation Block: Overlay Z-index nesting issues with consecutive cover blocks

[NoHopeRadio]

This is a core issue: WordPress/gutenberg#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

1. Create a navigation menu within a cover block.
2. Enable the overlay option for the menu.
3. Create a cover block as the next element on the page, add text and overlay to this block.
4. 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

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 6174732-zen
• 6223970-zen
• 6737383-zen
• 7374639-zen
• 7396302-zen
• 7707902-zen
• 7790193-zen
• 7960428-zen
• 8164886-zen
• 8849232-zen
• 9291659-zen

[cuemarie]

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple – Replicated
• Tested on Atomic – Replicated
• Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

• Replicated in all test environments! Even without a second Cover block following the first, it seems like the Navigation Block, when inside of a Cover block, runs into z-index issues in the Editor as well.

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

• NOTE - this behavior did not occur on my selfhosted site using Gutenberg 15.5.0, but the issues with other cover blocks (as noted above) did happen there as well.

Live Site

📌 ACTIONS

• Assigned to Apex
• Reported in /gutenberg: [Block] Navigation nested inside [Block] Cover results in Z-Index issues with other cover blocks WordPress/gutenberg#49668
• Added to ‘HE Cross-repo Watchlist’ project board
• Raised priority to Normal as this seems like it'd be fairly easy to run into

[Gustavo-Hilario]

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 end of the cover block.

[masperber]

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.

[cuemarie]

Customer report in #81459 :

• 6737383-zen

[the-misha]

Another customer report: 7374639-zd-a8c

[tvolpert]

another one here: 7396302-zd-a8c. Provided the CSS workaround

[tvolpert]

reported in 7707902-zd-a8c

[rinazrina]

Another report: 7790193-zd-a8c

[rinazrina]

Another one: 7960428-zd-a8c

As a workaround, I advised the user to replace the Cover block behind the Nav menu with a Group block. Then add a Background image to the Group block.

[ezebecke]

Another report on 8164886-zd-a8c

[renatho]

Should be fixed with this PR: WordPress/gutenberg#65626

[supernovia]

Noting these two issues might be duplicates or very similar:
#79317
#93675

@renatho thank you! 🙏

[nazilya06]

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]

Removing groundskeeper label since this has been picked up.

[renatho]

Closed with WordPress/gutenberg#66093

[nazilya06]

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.