Sub Menu problem in anchor links

[Daniel]

Hello,
Can you take a look at the page that I am preparing with your theme? When trying to add anchor links, the submenu is fixed instead of disappearing.

Thank you!

[David]

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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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! 🙂

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[David]

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' );
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

Hi again,
i use code snippets, but the submenu don’t dissapear 🙁

Any other option?

[David]

Hmmm… try this JS instead:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Daniel]

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

[Daniel]

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>

[David]

Glad to hear that – and thanks for sharing!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts