Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#52663 new defect (bug)

Twenty Twenty-One: Possible bug on primary navigation

Reported by: nek285's profile nek285 Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version:
Component: Bundled Theme Keywords: has-patch
Focuses: css Cc:


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:

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 3 years ago.
Bug screenshot
52663.diff (544 bytes) - added by mukesh27 3 years ago.

Download all attachments as: .zip

Change History (4)

3 years ago

Bug screenshot

#1 @sabernhardt
3 years ago

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

3 years ago

#2 @mukesh27
3 years ago

  • Keywords has-patch added; needs-patch removed
Note: See TracTickets for help on using tickets.