Twenty Twenty-One: Possible bug on primary navigation

[nek285]

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;
}

[nek285]

Bug screenshot

[karmatosed]

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

[karmatosed]

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

[karmatosed]

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.