WordPress.org
Get WordPress

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 8 months ago

#49322 closed defect (bug) (fixed)

Twenty Twenty: Submenu items disappear underneath the Cover block

Reported by: kjellr's profile kjellr Owned by: ianbelanger's profile 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 5 years ago.

Download all attachments as: .zip

Change History (8)

@kjellr
5 years ago

#1 follow-up: @kjellr
5 years 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 years 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
5 years 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
5 years ago

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

Reviewing for commit.

#5 @ianbelanger
5 years 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
5 years 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
5 years 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.