search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.48k stars 4.18k forks source link

Cover block: Cover block in content body overlaps mobile menu overlay #45353

Open jamiepalatnik opened 2 years ago

jamiepalatnik commented 2 years ago

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:

Cover block 1

Screenshots, screen recording, code snippet

Screen recording:

https://user-images.githubusercontent.com/30788962/198345331-b23b61fd-b189-4e6b-9d9c-129c193ed8cb.mp4

Environment info

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 commented 1 year ago

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

Jaykame commented 1 year ago

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 commented 1 year ago

Reported here as well:

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

renatho commented 1 week ago

This could be closed after: https://github.com/WordPress/gutenberg/pull/66093