Make WordPress Core

Opened 3 years ago

Last modified 3 years ago

#53976 new defect (bug)

Twenty Twenty-One: Anchor link on the same page causes the menu button icon to turn upside down

Reported by: joelbermudez's profile joelbermudez Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: javascript Cc:


As reported and requested in

If you have an anchor link on the same page, the icon turs upside down.
Example. In if you add a link to, this will cause the issue. An example will be a scroll to top button as in the report mentioned.

Video showing (the bug report is for the second option. The first one was solved too in the report, but may not be the best solution, and, as the theme is not prepared to have a fixed header, and the problem is that when clicking the menu button, it automatically scrolls to the top, may not be relevant, but you can check on the report mentioned at first).

In the video you can see in 0:09 when I click "ARRIBA", that is a scroll to top in using

Problem is in primary-navigation.js

document.addEventListener( 'click', function( event ) {
            // If target onclick is <a> with # within the href attribute
            if ( && '#' ) ) {
                wrapper.classList.remove( id + '-navigation-open', 'lock-scrolling' );
                twentytwentyoneToggleAriaExpanded( mobileButton );
                // Wait 550 and scroll to the anchor.
                setTimeout(function () {
                    var anchor = document.getElementById(;
                }, 550);

Possible Solution:


document.addEventListener( 'click', function( event ) {


document.querySelector('.primary-menu-container').addEventListener( 'click', function( event ) {

The function was being activated all the time, and that function should only work when the mobile menu is open. Now, you can use #anchors to move on the same page off the menu without “glitching” the menu icon.

That change is tested and working without any problems.

Change History (1)

#1 @sabernhardt
3 years ago

  • Keywords needs-patch added; has-patch removed

Thanks for the report!

Related: #53331

Note: See TracTickets for help on using tickets.