Nav menu on Mobile remains open after clicking on an anchor link

[nickpagz]

Running WordPress version 6.1

Steps to reproduce:

• Install WordPress, use the default Twenty twenty-three or Twenty twenty-two theme
• Create a page, add some ipsum lorem to give length to the page, add a link to an element at the bottom of the page (#news for example), set this page as the home page from Reading settings
• Create a menu item that links to your element on the page (#news in this example)
• View the page on your mobile device
• Click/tap the mobile menu icon to open the menu overlay
• Click/tap on the #news link

Expected behaviour: the menu overlay closes and the page scrolls to the relevant element (the one with the #news anchor)

What happens instead: The menu overlay does not close when you click the link, obscuring the page content. Menu needs to be closed manually to view page content.

[costdev]

Hi @nickpagz, welcome to Trac and thanks for the detailed testing instructions!

I tried this in the browser (using DevTools and mobile user agent), but couldn't reproduce it.

What mobile device and browser are you using, so that reproduction tests can include these?

[nickpagz]

Hmm, this was on an iPhone 12 Mini using Chrome, all latest versions.
On Chrome desktop using mobile user agent (again iPhone), I can replicate but with the added bonus of the page scrolling back to the top when the menu is closed - though that could be the particular site I tested for this case. Let me do some additional testing and report back.

[nickpagz]

@costdev I've been able to narrow down the issue to the format of the link used.

If you simply use #news as your link, then all works fine. However, the link doesn't work if you're on a different page. Clicking it reloads the same page as the link is relative to the current page. So this really only works for single-page sites.

Using /#news will get you back to the homepage and the correct anchor. However, clicking on the link from the homepage causes the menu overlay to remain open.

Using an absolute url will work if you omit https:// (since it defaults to http) or use http://. Http works presumably because of the redirect to https, which causes a page reload which closes the menu overlay.

I'm not sure of the implications of having the links set to http from an SEO perspective, but a redirect and page reload seems less than ideal if you're already on the page. It seems like the best approach at the moment is an absolute url with an http protocol or omitting the protocol altogether is the only solution that works, as far as I can tell.

UPDATE: A downside to using the redirect approach is the redirect will be cached as a 301. So when a site visitor selects a subsequent anchor link from the menu the page gets reloaded to the first anchor link selected. Safari cache expiry is 300s, haven't checked on FF or Chrome, but the issue is present on both.

UPDATE 2: Looks like this might have actually been fixed in ​this GB PR .

[aldoushuxley786]

If your mobile nav menu stays open after clicking an anchor link, it’s likely a JavaScript issue. I’ve fixed this for an SEO agency site by adding a simple script to close the menu after a link is clicked!

[r1k0]

Reproduction Report

Environment

• WordPress: 6.9
• PHP: 8.3.19
• Server: Apache
• Database: mysqli (Server: 11.4.9-MariaDB / Client: mysqlnd 8.3.21)
• Browser: Chrome 144.0.0.0 (Mobile)
• OS: Android
• Theme: Twenty Twenty-Three 1.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Used the ones provided by the reporter above in the ticket description.
2. ❌ Bug is not occurring

Expected behavior

• The menu overlay closes once the anchor link is clicked and the page is scrolled to the relevant element.

Additional Notes

• As mentioned by the reporter, this issue is fixed in Gutenberg: ​https://github.com/WordPress/gutenberg/pull/45829

Screenshots/Screencast with results

• ​https://files.catbox.moe/lrlzv4.mp4

[famyra98]

Replying to r1k0:

Reproduction Report

Environment

• WordPress: 6.9
• PHP: 8.3.19
• Server: Apache
• Database: mysqli (Server: 11.4.9-MariaDB / Client: mysqlnd 8.3.21)
• Browser: Chrome 144.0.0.0 (Mobile)
• OS: Android
• Theme: Twenty Twenty-Three 1.6
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Used the ones provided by the reporter above in the ticket description.
2. ❌ Bug is not occurring

Expected behavior

• The menu overlay closes once the anchor link is clicked and the page is scrolled to the relevant element.

Additional Notes

• As mentioned by the reporter, this issue is fixed in Gutenberg:

Screenshots/Screencast with results

• 

As I see the full results shown on the screencast, I am trying to resolve this issue, which may have been fixed in Gutenberg.