[Support request] Close clicked submenu after clicked on submenu item (anchor links)

[Manuel]

Hey there,

I’ve created a submenu (clicked version) with a few anchor links. When I’ve clicked on one of them, the submenu didn’t close. Any ideas how to fix it?

User: Tom
Password: Generate

Best regrds
Manuel

[Leo]

Hi there,

Can you give this a shot?
https://generatepress.com/forums/topic/anchor-element-on-a-submenu-item/

[Manuel]

Thanks for the very fast reply.
I’ve already tried that one. Doesn’t work.

[Leo]

Can you try using Hover?
https://docs.generatepress.com/article/navigation-dropdown/

[Manuel]

yeah, when I choose the “Hover Version” it works. But when it’s possible I want to use the “Clicked Version”.

[Tom]

Can you try this PHP?:

add_action( 'wp_enqueue_scripts', function() {
    $script = "
        var deactivateSubMenuOnScroll = function() {
            var openSubMenus = document.querySelectorAll( 'nav .main-nav .menu-item-has-children .sub-menu.toggled-on' ),
                activeMenuItems = document.querySelectorAll( 'nav .main-nav .menu-item-has-children.sfHover' );

            for ( var i = 0; i < openSubMenus.length; i++ ) {
                openSubMenus[i].classList.remove( 'toggled-on' );
            }

            for ( var i = 0; i < activeMenuItems.length; i++ ) {
                activeMenuItems[i].classList.remove( 'sfHover' );
            }
        };

        document.addEventListener( 'scrollStart', deactivateSubMenuOnScroll, false );
    ";

    wp_add_inline_script( 'generate-smooth-scroll', $script );
} );

Let me know 🙂

[Manuel]

Thanks Tom!
When I’ve added the code via “Code Snippets” I got this message:

The code snippet that you’re attempting to save has produced a fatal flaw on line 4:

syntax error, unexpected ‘nav’ (T_STRING)
The previous version of the snippet is unchanged and the rest of this website should work as normal before.

[Tom]

Sorry about that! Can you try the updated code?

[Manuel]

Sorry Tom, didn’t work. No error message anymore but the submenu keeps still open after click.

[Tom]

Ah, sorry. That code assumed you were using the smooth scroll option in GP Premium.

Are you using a specific smooth scroll script/plugin? Or is it happening automatically with Elementor?

[Manuel]

It’s happening automatically with Elementor.
I’ve seen that your code assuming smooth scroll but even when I activate your smooth scroll script the code doesn’t work.
Wish I could deactivate the Elementor smooth scroll but I didn’t find a way to do that yet.

[Tom]

I don’t think they allow you to disable it for some reason.

I wonder if there’s an event listener we can hook into within their smooth scroll script? It might be worth asking them. We basically need some code to fire once the smooth scroll begins (or ends).

[Manuel]

Good idea, I’ll ask the Elementor support. If I get a useful hint I’ll post it here.
Thanks a lot, for your great work and always great support.

[Tom]

No problem! If they have a listener we can hook into, I’m happy to help with the code 🙂

[Author]

Posts