WordPress.org
Get WordPress

Make WordPress Core

Opened 7 years ago

Closed 6 years ago

Last modified 19 months ago

#49322 closed defect (bug) (fixed)

Twenty Twenty: Submenu items disappear underneath the Cover block

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

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 7 years ago.

Download all attachments as: .zip

Change History (8)

@kjellr
7 years ago

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

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

#3 in reply to: ↑ 1 @JavierCasares
6 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
6 years ago

  • Owner set to ianbelanger
  • Status new → reviewing

Reviewing for commit.

#5 @ianbelanger
6 years ago

  • Resolution → fixed
  • Status reviewing → 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
6 years ago

  • Keywords fixed-major added; needs-testing removed
  • Milestone 5.5 → 5.4.2
  • Resolution fixed
  • Status closed → reopened

Reopening for backport.

#7 @whyisjake
6 years ago

  • Resolution → fixed
  • Status reopened → 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.