WordPress.org

Make WordPress Core

Opened 5 weeks ago

Closed 4 weeks ago

Last modified 4 weeks ago

#52006 closed defect (bug) (fixed)

Twenty Twenty-One: anchor links don't work in mobile menu

Reported by: macmanx Owned by: desrosj
Milestone: 5.6.1 Priority: normal
Severity: normal Version: 5.6
Component: Bundled Theme Keywords: has-patch, fixed-major, twenty-twenty-one-1.1
Focuses: javascript Cc:

Description

Hi there, similar to #48916 anchor links are broken in the mobile menu, they just don't go anywhere.

This is a handy use case when you want your nav menu to link to further options in the footer widgets.

I have tested this on two different WordPress 5.6 sites, both running Twenty Twenty One 1.0.

Attachments (1)

52006.patch (1.3 KB) - added by poena 5 weeks ago.
Close menu and scroll to anchor if an anchor link is clicked.

Download all attachments as: .zip

Change History (12)

@poena
5 weeks ago

Close menu and scroll to anchor if an anchor link is clicked.

#1 @poena
5 weeks ago

  • Focuses javascript added
  • Keywords has-patch added

I am able to reproduce the problem.

This is an initial patch with code adapted from Twenty Twenty.
We don't need to consider anchor links outside the menu since the responsive menu is full screen.

How this was tested:

Added a HTML widget with a target ID to the footer widget area.
Added two anchor links to the primary menu, one as a parent menu item, and the second as a sub menu item.
Reduced the browser window width and clicked on the different anchor links in the menu.

Windows 10, Chrome Version 87.0.4280.88. Firefox 83.0.
The patch still needs to be tested on a touch device.

-The scroll to the target is very fast and this could perhaps be improved to feel more like a natural scroll.

Last edited 5 weeks ago by poena (previous) (diff)

#2 @macmanx
5 weeks ago

Excellent! I can confirm that your patch works for Safari on an iPhone 12 running iOS 14.2.1.

#3 @melchoyce
5 weeks ago

#52068 was marked as a duplicate.

#4 @t-p
5 weeks ago

Excellent! I can confirm that your patch works for Samsang Android

This ticket was mentioned in Slack in #core-themes by poena. View the logs.


4 weeks ago

#6 @poena
4 weeks ago

  • Milestone changed from Awaiting Review to 5.6.1

#7 @desrosj
4 weeks ago

  • Owner set to desrosj
  • Status changed from new to reviewing

#8 @desrosj
4 weeks ago

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

In 49854:

Twenty Twenty-One: Allow local anchor links to be used in primary navigation.

This adds some JavaScript to detect when an anchor link is clicked within the primary navigation on mobile devices and closes the menu before scrolling to the location on the page.

Props poena, macmanx, t-p.
Fixes #52006.

#9 @desrosj
4 weeks ago

  • Keywords fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

#10 @desrosj
4 weeks ago

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

In 49855:

Twenty Twenty-One: Allow local anchor links to be used in primary navigation.

This adds some JavaScript to detect when an anchor link is clicked within the primary navigation on mobile devices and closes the menu before scrolling to the location on the page.

Props poena, macmanx, t-p.
Merges [49854] to the 5.6 branch.
Fixes #52006.

#11 @desrosj
4 weeks ago

  • Keywords twenty-twenty-one-1.1 added

Adding a custom keyword for querying tickets included in the Twenty Twenty-One version 1.1 release in the future.

Note: See TracTickets for help on using tickets.