WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 3 months ago

#49322 closed defect (bug) (fixed)

Twenty Twenty: Submenu items disappear underneath the Cover block

Reported by: kjellr Owned by: ianbelanger
Milestone: 5.4.2 Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: has-patch fixed-major
Focuses: css Cc:

Description

When a site has many submenu items, they may appear below the color overlay of a Cover block, rendering them inaccessible via hover:

http://cldup.com/UN_vJgL8Lu.png

GIF: https://cloudup.com/cJoqjhPu9dV


To reproduce:

  1. Add a menu item with many submenu items (I had to use at least 12).
  2. Begin a post or page with a wide or full-width Cover block.
  3. View that post on desktop, and attempt to hover over the bottommost submenu items.

They'll appear behind the cover block's color overlay layer, and the submenu will close when you attempt to hover over them.


Tested with WP 5.3.2, Gutenberg 7.3, and Twenty Twenty 1.1

Attachments (1)

49322.patch (798 bytes) - added by kjellr 6 months ago.

Download all attachments as: .zip

Change History (8)

@kjellr
6 months ago

#1 follow-up: @kjellr
6 months ago

I've added 49322.patch to fix this issue. It adjusts the z-index of #site-header from 1 to 2. The z-index of the cover block's overlay is 1, so that's enough to fix the issue. Adjusting the z-index of any items below #site-header didn't have any positive effect, and making this change doesn't seem to mess with anything else that relies on z-index(like the search box for instance).

Before:

http://cldup.com/JleVB35K4N.png

After:

http://cldup.com/MBwDLj3tqh.png

#2 @ianbelanger
5 months ago

  • Focuses css added
  • Keywords has-patch needs-testing added
  • Milestone changed from Awaiting Review to 5.5
  • Version changed from 5.3.2 to 5.3

#3 in reply to: ↑ 1 @JavierCasares
4 months ago

Replying to kjellr:

I've added 49322.patch to fix this issue. It adjusts the z-index of #site-header from 1 to 2. The z-index of the cover block's overlay is 1, so that's enough to fix the issue. Adjusting the z-index of any items below #site-header didn't have any positive effect, and making this change doesn't seem to mess with anything else that relies on z-index(like the search box for instance).

Tested and works for me :) Thanks @kjellr

#4 @ianbelanger
3 months ago

  • Owner set to ianbelanger
  • Status changed from new to reviewing

Reviewing for commit.

#5 @ianbelanger
3 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 47609:

Bundled Themes: Twenty Twenty submenu items disappear underneath the Cover block.

Fixes the submenu issue by raising the z-index value of the site-header from 1 to 2.

Props kjellr, JavierCasares.
Fixes #49322.

#6 @ianbelanger
3 months ago

  • Keywords fixed-major added; needs-testing removed
  • Milestone changed from 5.5 to 5.4.2
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backport.

#7 @whyisjake
3 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 47825:

Bundled Themes: Twenty Twenty submenu items disappear underneath the Cover block.
Fixes the submenu issue by raising the z-index value of the site-header from 1 to 2.

This brings the changes in [47609] to the 5.4 branch.

Props kjellr, JavierCasares.
Fixes #49322.

Note: See TracTickets for help on using tickets.