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

[MaggieCabrera]

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

Looks like we need the overflow hidden for border radius to work

[MaggieCabrera]

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

Looks like we need the overflow hidden for border radius to work

I have looked into this a little more and I haven't found a solution.

My setup:

A cover block with an image in the background, set to fix background: I set a border with a noticeable width and I selected a border radius. Inside, a nav block with submenus, I positioned it close to the bottom with the cover controls, this makes the overflow issue very apparent.

What I tried:

• Removing the overflow breaks the border radius and the image overlaps the borders that we set up for the cover
• I tried setting the same border radius for .wp-block-cover__image-background and .wp-block-cover__background but that doesn't work if the border width is present, there is a noticeable gap between the border and the image
• I tried messing with the z-index of wp-block-cover__inner-container but that doesn't seem to work (I wasn't really expecting it to)

I don't see an easy solution for this that doesn't require markup changes... I'll sleep on it see if I get a fresh idea.

[MaggieCabrera]

A screenshot of the above removing overflow hidden:

[getdave]

I tested child elements inheriting the border radius and it's promising.

That said, the overflow properties of the Cover block are what is causing us our problem with Navigation.

They seem to be added for sticky positioning. I wonder if they could be conditionally applied with a warning that this my "clip" dropdowns and popovers?

[getdave]

I also tested achieving the same layout with the Group block (including border radius) and there is no problem with the submenu dropdowns.

[MaggieCabrera]

I also tested achieving the same layout with the Group block (including border radius) and there is no problem with the submenu dropdowns.

I did the same, now add a wide border to it plus the border radius

[MaggieCabrera]

I did the same, now add a wide border to it plus the border radius

This is what I mean: