Twenty Nineteen: Mobile menu isn't scrollable

[kjellr]

As originally reported by @anevins in the Twenty Nineteen GitHub repo:

​https://github.com/WordPress/twentynineteen/issues/713

Twenty Nineteen's mobile menu uses a fixed position, and does not allow for vertical scrolling when menu items extend beyond the screen height. In this screenshot for instance, it's impossible to scroll down and see the additional menu items:

Normally, this would be solved by applying display: block (instead of table), and overflow-x: scroll to the submenu. However, in this case, that results in long menus visible under their children submenus:

[karmatosed]

I am still seeing this today so it is an issue I would recommend is resolved as if you have a long menu it does appear broken.

Trac ticket: https://core.trac.wordpress.org/ticket/45902

[lakshyajeet]

Before fix

[lakshyajeet]

After fix

[coralietixeront]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8962

Environment

• OS: macOS
• Web Server: Playground
• PHP: 8.0
• WordPress: Trunk
• Browser: Chrome
• Theme: Twenty NineTeen
• Active Plugins: None

Actual Results

• ✅ Issue resolved with patch. Once the patch has been applied, I can scroll through the menu 👍

Supplemental Artifacts

See Screenshot below

[coralietixeront]

After applying the patch

[audrasjb]

Thanks for testing the patch @coralietixeront.

Note: We're currently using this ticket for our contribution day at Whodunit Agency.

[Spaceshipone]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8962

Environment

• OS: Windows 11
• Web Server: Playground
• PHP: 8.0
• WordPress: trunk
• Browser: Chrome 137.0.7151.103
• Theme: Twenty NineTeen
• Active Plugins:

Actual Results

• ✅ Issue resolved with patch. I've tested the patch and can scroll through the menu in the mobile version.

Additional Notes

• I didn't have the problem with Firefox 139.0.1. I could still scroll without the patch.

Supplemental Artifacts

See screenshot below

[Spaceshipone]

test on chrome with patch

[maxpertici]

Test Mobile Menu

[maxpertici]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8962

Environment

• OS: macOS 15.5
• Web Server: Playground
• PHP: 8.0
• WordPress: trunk
• Browser: Firefow 139
• Theme: Twenty NineTeen
• Active Plugins: None

Actual Results

• ✅ Issue resolved with patch.

Additional Notes

Supplemental Artifacts

See screencast test-mobile-menu-45902.mp4

[beryldlg]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/8962

Environment

• OS: Mac 11.7
• Web Server: Playground
• PHP: 8.0
• WordPress: trunk
• Browser: Brave
• Theme: Twenty NineTeen

Actual Results

✅ Issue resolved with patch. I've tested the patch and can scroll through the menu in the mobile version.

Additional Notes

Once the patch applied, I can scroll throught the menu

Supplemental Artifacts

See Screenshot below
https://core.trac.wordpress.org/attachment/ticket/45902/scroll-menu-brave-45902.mp4

[audrasjb]

Marking for commit consideration.

[audrasjb]

In 60302:

Twenty Nineteen: Make mobile nav menu scrollable.

This changeset fixes an issue where Twenty Nineteen's primary nav menu panel wasn’t scrollable when the primary menu contains a lot of items, preventing to scroll down to see all menu items.

Props kjellr, karmatosed, lakshyajeet, coralietixeront, Spaceshipone, maxpertici, beryldlg.
Fixes #45902.