Sub Menu problem in anchor links

Hi there,

This is what i tried - i hovered over the Work with DDA menu item. Selected either anchor link - if i reduce the height of my browser so the page has to scroll to the anchor link then the sub menu closes - because it is no longer hovered over.

If however the browser isn't long enough and doesn't need to scroll then the the menu item remains hovered on which is why it stays open.

Is that the issue ?

Hello david,
the problem is that if I click on one of the submenu items, the link works, but the gray submenu continues.

Ideally, when clicking, this submenu would disappear.

If I don't explain, I can make you a little video if you want! :)

So we can agree we are looking at the same thing - can you share a video ?

Sure!
https://www.dropbox.com/s/mwr1alhebzg8cy0/dda.mkv?dl=0

Aah right ok.
Now good news is the GP Smooth Scroll option fixes that.
Bad news is you're using Elementor and its smooth scroll cannot be disabled and will conflict with GPs smooth scroll.

So instead - try following the JS method Tom provides here:

https://generatepress.com/forums/topic/im-a-pure-novice-dont-understand-forum-discussions-re-my-questions/#post-894240

I am testing the method that you tell me, but it doesn't work :(
I have tried changing the name of the layer, etc. but it fails

odd - site isn't requesting jQuery.
Add this PHP Snippet to make sure jQuery gets loaded.

add_action( 'wp_enqueue_scripts', 'tu_load_jquery' );
function tu_load_jquery() {
    wp_enqueue_script( 'jquery' );
}

Sorry David, I add this php code into the hook?

Sorry - no it needs to be added in one of these ways:

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

Elementor really does make simple stuff difficult sometimes lol

Hi again,
i use code snippets, but the submenu don't dissapear :(

Any other option?

Hmmm... try this JS instead:

jQuery( document ).ready( function( $ ) {
    $( '.main-navigation a' ).on( 'click', function() {
        var item = $('.sfHover');
        item.removeClass( 'sfHover' );
    } );
} );

yessss! now works.... BUUUUUT, when i click the back to top button, the sub-menu appears again :___

with this, now works!

<script>
jQuery( document ).ready( function( $ ) {
    $( '.main-navigation a' ).on( 'click', function() {
        var item = $('.sfHover');
        item.removeClass( 'sfHover' );
    } );

    $( '.generate-back-to-top' ).on( 'click', function() {
        var item = $('.sfHover');
        item.removeClass( 'sfHover' );
    } );
} );	
</script>

Glad to hear that - and thanks for sharing!