anchor links not working in navigation menu on Android device

Hi there,

When you tap a link in the mobile menu, the plugin closes the menu and moves focus back to the hamburger button. On Android, this can cause the page to jump back to the top where the button is, instead of scrolling to the section you selected. iPhones handle this differently, which is why it works correctly there.

You can fix this by adding this snippet:

add_action( 'wp_footer', function() {
    ?>
    <script>
    document.addEventListener( 'click', function( event ) {
        var nav = event.target.closest( '.gb-navigation--mobile.gb-navigation--open' );
        if ( ! nav ) return;

        var link = event.target.closest( 'a[href*="#"]' );
        if ( ! link ) return;

        var href = link.getAttribute( 'href' );
        var match = href.match( /#(.+)$/ );
        if ( ! match ) return;

        var target = document.getElementById( match[1] );
        if ( ! target ) return;

        event.preventDefault();
        event.stopImmediatePropagation();

        var toggle = nav.querySelector( '.gb-menu-toggle--toggled' );
        if ( toggle ) toggle.click();

        setTimeout( function() {
            target.scrollIntoView( { behavior: 'smooth' } );
            history.replaceState( null, '', href );
        }, 300 );
    }, true );
    </script>
    <?php
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

This injects the fix in the footer on every page. What it does is intercept the anchor link click, close the mobile menu, wait for the close animation to finish, and then smoothly scroll to the correct section on the page.

Let me know how it goes!

You’re welcome!