Image compare block: navigation block(submenus) overlap the block

[SiR-DanieL]

Quick summary

The issue is similar to https://github.com/Automattic/themes/issues/5550

ON AlleyOop, the Image Compare block has higher z-index than the navigation block and it covers the submenu if it's at the top, close to the header.

Reported in 8890407-zen

Steps to reproduce

1. Activate AlleyOop
2. Add a header with navigation block
3. Make sure the navigation has submenus
4. Add an Image compare block underneath it, big enough to go below where the submenu would appear
5. Hover over the item with the submenu in the header, see the error

A clear and concise description of what you expected to happen.

The submenu should not be hidden. I fixed it with some custom CSS with z-index 10 (the image compare has z-index 5)

What actually happened

The submenu is hidden behind the Image Compare block.

Impact

One

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

Add this code to Additional CSS

.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container, .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within>.wp-block-navigation__submenu-container {
    z-index: 10;
}

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

No response

[github-actions[bot]]

Support References

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

• [ ] 8890407-zen

[Robertght]

📌 REPRODUCTION RESULTS

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

📌 FINDINGS/SCREENSHOTS/VIDEO I was able to replicate with Twentytwenty-two as well:

📌 ACTIONS

• Triaged
• Moving this to the Jetpack repo instead.