Navigation block: overlapping(z-index) issue when nested inside Cover Block

[Robertght]

Quick summary

While having an overlay menu opened, the slideshow block shows up on top of the overlay.

Steps to reproduce

1. Activate a block theme(tested with Blank Canvas, 2023, Quadrat)
2. Open the default page template
3. Set a Cover block in the header with a smaller height. (20-40vh)
4. Set the navigation block's overlay menu to "alaway".
5. After the header template part, add a slideshow block(or multiple, I don't judge)
6. Publish the changes and open the menu

What you expected to happen

To see the navigation menu correctly

What actually happened

This happened: (yes that image is from the slideshow)

Browser

Google Chrome/Chromium, Mozilla Firefox, Microsoft Edge

Context

No response

Platform (Simple, Atomic, or both?)

Simple

Other notes

Found that in Slack while trying to help with CSS: p1687930863677319-slack-C03TY6J1A

I only tested this on Simple websites and on a Pressable website. The issue only manifested on the Simple sites, using the same themes.

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

CSS is the only thing I could suggest. In Slack we used:

/* adjust the z-index on the slideshow | xxxxxx-zen */
.wp-block-cover-image .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover__inner-container {
	z-index: 99999;
}
```,

[github-actions[bot]]

Support References

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

• [ ] -zen
• [ ] 7228873-zen
• [ ] 7277570-zen
• [ ] 7825401-zen
• [ ] 8082235-zen
• [ ] 8173661-zen
• [ ] 8380863-zen
• [ ] 8702470-zen
• [ ] 8715843-zen
• [ ] 8772803-zen

[cuemarie]

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

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

📌 FINDINGS/SCREENSHOTS/VIDEO

• The problem only appears when the Nav Block is placed inside a Cover block (the height of the cover block has no impact on the behavior). The z-index of the Slideshow and the Nav block are as follows in both setups:

wp-block-jetpack-slideshow_container

.swiper-container {
     z-index: 1;
}

wp-block-navigation__responsive-container hidden-by-default has-modal-open is-menu-open

.wp-block-navigation__responsive-container.is-menu-open {
     z-index: 100000;
}

The Cover block is the key difference, and the cover block also has a z-index: 1, and that z-index is likely what's causing problems. There are a few open issues about this in /gutenberg such as:

• https://github.com/WordPress/gutenberg/issues/45353
• https://github.com/WordPress/gutenberg/issues/52511

Screenshots/Recordings

Simple Site, with Nav Block inside Cover Block:

Same site without Cover Block:

📌 ACTIONS

• Assigned to Other
• Added to ‘HE Cross-repo Watchlist’ project board

[janmckell]

This occurred here: 7228873-zd-a8c

[carolframen]

7277570-zen

This issue is not exactly the same as what is happening in this ticket, as the ticket is not about the overlay menu, and the height of the menu does affect the issue. This ticket is the same issue as the merged one https://github.com/Automattic/wp-calypso/issues/80151.

This user is on the personal plan, so they can't add CSS, but I replicated the issue on my site and tried the CSS workaround for this situation and it did not work.

I tested and making the cover block longer in this case does help, but it might not be how the user wants it to look like

[Aurorum]

7825401-zen - CSS workaround also doesn't help

[mahfuzurwp]

7825401 -zen Setting the overflow to visible of the cover block worked in this ticket.

.wp-block-cover{
overflow: visible;
}

[rinazrina]

Related issue: https://github.com/Automattic/wp-calypso/issues/75439

[vinnykaur]

One more: 8082235-zd-a8c

[upwardmomentum84]

Related issue: 8173661-zd-a8c

The submenu on mobile was being overlayed by the Cover block below it. I added a CSS class to set the Cover block that contained the menu to have a high z-index and this resolved it.

[hngdny]

Related issue: 8380863-zd-a8c

Used the workaround to set custom CSS class + high Z-index

[supernovia]

We have a case here: 8702470-zd-a8c -- user isn't actually doing anything with the cover block anymore, so I'd recommended not using it and reverting back to a version that works, but we can add the CSS if user responds affirming they want it

[mrfoxtalbot]

As a workaround, we can recommend users they replace their cover block with a group block, now that group blocks support background images. I tested it and the dropdown menu shows outside the group block without any issues:

https://github.com/user-attachments/assets/29f1249b-cd68-48c1-b71d-8f46374e8502

[supernovia]

I've got another case here. 8715843-zd-a8c

[supernovia]

As a workaround, we can recommend users they replace their cover block with a group block, now that group blocks support background images. I tested it and the dropdown menu shows outside the group block without any issues:

I've just tested this on a simple site + personal plan; alas I couldn't get it to work.

[supernovia]

Another case here: 8772803-zd-a8c

[supernovia]

This might be a duplicate or likeness of this issue: https://github.com/Automattic/wp-calypso/issues/75439

[renatho]

This might be a duplicate or likeness of this issue: #75439

Yes! I just checked that the issue with the Slideshow is also fixed with the same PR.

[renatho]

As suggested by @supernovia it's duplicate (https://github.com/Automattic/wp-calypso/issues/75439), so I'm closing it.