Make WordPress Core

Opened 4 years ago

Closed 5 months ago

#52663 closed defect (bug) (fixed)

Twenty Twenty-One: Possible bug on primary navigation

Reported by: nek285's profile nek285 Owned by: karmatosed's profile karmatosed
Milestone: 6.7 Priority: normal
Severity: minor Version:
Component: Bundled Theme Keywords: has-patch needs-testing commit
Focuses: css Cc:

Description

The primary navigation menu can get stuck in a vertical list view under specific circumstances.

This bug seems to be affecting vanilla Twenty Twenty-One installations, and can even be replicated on the official theme preview page:

https://wordpress.org/themes/twentytwentyone/

In order to replicate, please follow these steps:

1) Load the Twenty Twenty-One theme preview, or a website based on the theme.

2) Force responsive design mode on your web browser, or resize the browser window to the appropriate dimensions, so that the hamburger (mobile) menu icon is displayed.

3) Open the mobile menu by clicking on the hamburger icon.

4) While the mobile menu remains open, exit responsive design mode, or maximize your browser window.

5) Now, the navigation bar links do not revert to their original positions - aka horizontally placed on the navigation bar. Instead, they are now placed in vertical order and overflow to the content area.

Refreshing the page allows the navigation bar elements to return to their original locations.

Exiting responsive design mode, or resizing the browser window, after closing the mobile hamburger menu, won't trigger the bug.

Tested on Chrome, Chromium, Firefox, Edge and Opera. Could replicate on all of these browsers.

The following CSS code seems to alleviate the issue:

.primary-navigation-open .primary-navigation > .primary-menu-container {
	position: relative;
}

Attachments (2)

twentytwentyonebug.png (184.3 KB) - added by nek285 4 years ago.
Bug screenshot
52663.diff (544 bytes) - added by mukesh27 4 years ago.

Download all attachments as: .zip

Change History (9)

@nek285
4 years ago

Bug screenshot

#1 @sabernhardt
4 years ago

  • Component changed from Themes to Bundled Theme
  • Focuses css added
  • Keywords needs-patch added

@mukesh27
4 years ago

#2 @mukesh27
4 years ago

  • Keywords has-patch added; needs-patch removed

#3 @karmatosed
7 months ago

  • Milestone changed from Awaiting Review to Future Release

Adding future release as this has a patch. Thanks for reporting.

#4 @karmatosed
6 months ago

  • Keywords needs-testing added

#5 @karmatosed
6 months ago

  • Owner set to karmatosed
  • Status changed from new to assigned

#6 @karmatosed
5 months ago

  • Keywords commit added
  • Milestone changed from Future Release to 6.7

Assigning to myself for testing and also to look to commit.

#7 @karmatosed
5 months ago

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

In 58629:

Twenty Twenty-One: Resolves bug on primary navigation.

The primary navigation was stuck in a vertical list when resize. This resolves that with positioning.

Props nek285, mukesh27.
Fixes #52663.

Note: See TracTickets for help on using tickets.