Make WordPress Core

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

Navigation links starting with /# don't close hamburger navigation menu on mobile

Reported by: asafm7's profile asafm7 Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Themes Keywords:
Focuses: javascript Cc:

Description (last modified by sabernhardt)

This code in /wp-includes/blocks/navigation/view-modal.min.js closes the hamburger navigation menu when a regular bookmark link (starting with #) is clicked:

document.querySelectorAll(".wp-block-navigation-item__content").forEach((function(e) {
            var t, o;
            if (null === (t = e.getAttribute("href")) || void 0 === t || !t.startsWith("#") || "_blank" === (null === (o = e.attributes) || void 0 === o ? void 0 : o.target))
                return;
            const n = e.closest(".wp-block-navigation__responsive-container")
              , i = null == n ? void 0 : n.getAttribute("id");
            e.addEventListener("click", (()=>{
                i && n.classList.contains("has-modal-open") && c.close(i)
            }
            ))
        }
        ))

This is great, but bookmark links starting with # will only work if the bookmark is on the current page a simple # link won't work. A /# link (with a slash) will work on the other hand - it will navigate to the homepage, and then scroll to the section. For example: /#some-section (instead of #some-section)

If the visitor is on the homepage, such a link with a / will work the same as a link without a / - scrolling to the section, without reloading the page. This makes it a perfect catch-all solution.

But, clicking such a link (/#) won't close the hamburger navigation menu on mobile, as the JavaScript code above only catches links starting with # (and not /#). This can be easily fixed by adding another OR condition: ||!t.startsWith("/#") or maybe even replacing the current condition with a "includes" condition, to catch both cases with one condition: ||!t.includes("#")

Thanks,
Asaf

Change History (4)

#1 @asafm7
17 months ago

I misunderstood the if logic. Only the !t.includes("#") solution will work (replacing !t.startsWith("#"))

#2 @sabernhardt
17 months ago

  • Component changed from Menus to Themes
  • Description modified (diff)
  • Focuses javascript added

Thanks for the report!

This looks like the same issue as GB45608, which could be fixed already in the Gutenberg plugin (and in the next version of WordPress).

#3 @asafm7
17 months ago

Great!

Sorry for missing the report.

#4 @sabernhardt
17 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to reported-upstream
  • Status changed from new to closed

Sometimes it is not very easy to find existing tickets or issues.

I'll close the ticket then. If there is more to do or say, the discussion can continue on GB45608 and/or a new Gutenberg issue.

Note: See TracTickets for help on using tickets.