WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 2 months ago

#48916 new defect (bug)

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

Reported by: Giorgio25b Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 5.3
Component: Bundled Theme Keywords: needs-patch
Focuses: javascript Cc:
PR Number:

Description

I’m testing a scenario where there is only 1 single page and therefore the main and mobile menu are structured on a #anchor-links structure: #project, #about, #and-so-on
I did try to use the shortcut url structure /#project and also the full domain path https://my-site.com/#project but there is nothing that is actually triggering the mobile menu to close and reach that url; though the url query changes in the browser without actually getting there.
This issue was reported and fixed on the Chaplin theme https://wordpress.org/support/topic/mobile-menu-doesnt-work-for-anchor-links/#post-12134002 though despite the same code approach, Chaplin is using jQuery while TwentyTwenty is plain JS.

Change History (3)

#1 @SergeyBiryukov
2 months ago

  • Component changed from Menus to Bundled Theme

#2 @ianbelanger
2 months ago

  • Milestone changed from Awaiting Review to Future Release

Just tested this and can confirm that anchor links do not work in the Mobile Menu or Desktop Expanded Menu locations.

#3 @suzylah
2 months ago

I also have this issue – one-pager website with the main navigation all linking to #anchors within the page. The problem is, they DO actually work (smooth scroll), but only on the second click. In fact, even if the second click is yet on another link, it then scrolls to the previous one.
Example (when performed in this order):
1) Click link #A – Scrolls to #A as expected.
2) Click link #B – nothing happens
3) Click link #C – scrolls to #B
4) Click link #D – scrolls to #C
5) Click link #B, scrolls to #D
And so on...
It appears as if the target is just saved on first click, and acted upon on the next click – but I couldn't find the place in the code yet where this happens.

PS. In the mobile menu, there was a second (CSS) issue on top, the html element gets the inline styles {overflow-y: scroll;position: fixed; ... etc...} set when menu opens, which fixes the whole window and nothing seem to happen on click.
I solved it with a quick&dirty html {position: static!important;overflow-y: unset!important;}

Note: See TracTickets for help on using tickets.