Cover block in content body overlaps mobile menu overlay

[jamiepalatnik]

Description

When a Navigation block is added within a Cover block in the header template part, and then a Cover block (using background image and also contains a Post Title block) in the content body is rendered on mobile, the second Cover block overlaps the mobile menu overlay, as if the z-index is greater than the menu.

Step-by-step reproduction instructions

1. In the site editor, create a header template part that is comprised of a Cover block that contains a Navigation block
2. Also in the site editor, outside the header template part, create another Cover block with a background image and Post Title block
3. Save changes, then preview the site in responsive view, particularly the mobile menu

The structure in the site editor should look like this:

Screenshots, screen recording, code snippet

Screen recording:

Cover.block.issue.mp4

Environment info

• WordPress Version 13.2.2
• Gutenberg active
• Tested on Chrome
• Was able to reproduce on multiple themes, including Twenty Twenty-Two and Blockbase

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[DaisyOlsen]

Confirmed that this occurs when there is a Navigation block inside a cover block. Affects cover blocks in the content body.

[Jaykame]

Ran into this with a user who using the blockbase theme and their Cover block on their site is covering their menu on mobile view. This appears to not only affect Cover Block inside the Navigation block but, like the other reported issue, it's happening when a Cover Block is inside content as well.

I recommend the user to use another block (Media and Text), and the issue was resolved.

[kathrynwp]

Reported here as well:

https://wordpress.org/support/topic/menu-z-index-on-mobile-views/

[renatho]

This could be closed after: #66093

[getdave]

I tested recently and placing Nav inside a Cover block in the header means that any submenus will be hidden underneath the main body content. Changing overflow to visible on Cover seems to resolve this