Make WordPress Core

Opened 5 months ago

Closed 6 weeks ago

Last modified 10 days ago

#60211 closed defect (bug) (reported-upstream)

[BUG] Custom Links in Menus with #targets FAIL TO WORK (just scroll to target)

Reported by: dbareis's profile dbareis Owned by:
Milestone: Priority: normal
Severity: major Version: 6.4.2
Component: Menus Keywords:
Focuses: Cc:

Description

Here is an example of a custom link in a menu:

/search-plants?category%5B%5D=Bird+Attracting#ShowMatchingPlants

Lets say I'm on the page:

/search-plants?category%5B%5D=Popular+%28home%29#ShowMatchingPlants

If I click the "Bird Attracting" link, it will not go to the page, it will ignore all parameters and simply scroll the current ("popular") page to the hash target "#ShowMatchingPlants".

If I click on the same menu item on any other page it will work.

Change History (3)

#1 @jazzbee
6 weeks ago

The issue you are experiencing with custom links in menus not working correctly to navigate to specific sections (anchors) on your website can be attributed to how the URLs are being handled by the browser when clicked from different pages. Specifically, when clicking on a custom link that includes a hash (#) target from a page with query parameters, the browser might not interpret the link as intended due to how it resolves the URL.

To resolve this issue, you can modify the custom links in your menu to ensure they work consistently across different pages on your website. Here are steps you can follow:

Use Absolute URLs for Menu Links:
Instead of using relative URLs or URLs with query parameters, use absolute URLs for your custom menu links. This means specifying the full URL including the domain name and path to the target page. For example:

http://example.com/search-plants?category%5B%5D=Bird+Attracting#ShowMatchingPlants

Avoid Query Parameters in Anchor Links:

If possible, avoid including query parameters (?category%5B%5D=Bird+Attracting) in the URL when linking to a specific section (#ShowMatchingPlants). Query parameters are used to pass data to a page and might interfere with how anchor links are interpreted by the browser.




Use JavaScript to Handle Navigation:
Implement JavaScript logic to handle the navigation when clicking on custom menu links. This can involve capturing the click event, preventing the default behavior, and manually scrolling to the desired section on the page based on the hash target.

Version 2, edited 6 weeks ago by jazzbee (previous) (next) (diff)

#2 @dbareis
6 weeks ago

  • Resolution set to reported-upstream
  • Status changed from new to closed

Thanks for the above suggestions, for now I am using a JavaScript solution. I had recently seen this bug in non-WordPress situations and on a different browser brand so I have raised a report at Chromium: https://issues.chromium.org/issues/333961056

Last edited 6 weeks ago by dbareis (previous) (diff)

#3 @desrosj
10 days ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.