[Support request] Dropdown menu change position & stays open on other menu choices

[Fredrik]

The website i’m soon to launch is acting up in the menu.

The sub-menu is opening up, but when hovering on another menu choice the entire sub-menu remains open and jumps around.
I’ve added a video showing the issue.

[David]

Hi there,

is this on any specific device or browser ? Does it happen on a different browser ?

[Fredrik]

It happens in all major browsers.

[Fredrik]

The menu is using anchor links. Shouldn’t matter, but since it isn’t closed after scrolling down the page we can clearly see the issue if we’d try to navigate the menu.

[Tom]

Hi there,

What are you using for smooth scroll ability? Can you try our option in Customize > General?

[Fredrik]

It’s probably using Beaver Builders built-in smooth scroll. Can’t find a way to disable it.
https://docs.wpbeaverbuilder.com/beaver-builder/advanced-builder-techniques/smooth-scrolling-tweaks-with-code/

I activated GP smooth scroll, but no luck.

[David]

I found this topic – not sure it will be of any help – there is no way to disable the BB smooth scroll globally – but it seems you can selectively disable it using the fl-no-scroll CSS Class

https://community.wpbeaverbuilder.com/t/beaver-builder-2-5-alpha/13955

[Fredrik]

That also disables GP smooth scroll. It didn’t fix the issue.

[Tom]

That shouldn’t have any effect on the GP smooth scroll.

Last thing to do is write some javascript to fix it. Let’s try this:

var subMenuLinks = document.querySelectorAll( 'nav .sub-menu a' );

for ( var link = 0; link < subMenuLinks.length; link++ ) {
    subMenuLinks[link].addEventListener( 'click', function( e ) {
        subMenuLinks[link].closest( 'sfHover' ).classList.remove( 'sfHover' );
    } );
};

Let me know if that works or not 🙂

[Fredrik]

I added the script with GP elements, head hook. It didn’t solve the issues. It’s live on the site now.

[David]

Hi there,

to add that code using a Hook Element first you need to wrap it inside script tags:

<script>
/* Javacscript goes here */
</script>

Secondly you would use the wp_footer hook so the script is fired after the HTML has loaded.

[Fredrik]

Yes I did that. (not footer though)
I gave you guys the login. Might be faster if you login and try than tossing me around with changes? 🙂

[Tom]

Here we go, this seems to do the trick:

<script>
    var subMenuLinks = document.querySelectorAll( 'nav .sub-menu a' );

    for ( var link = 0; link < subMenuLinks.length; link++ ) {
        subMenuLinks[link].addEventListener( 'click', function( e ) {
            setTimeout( function() {
                document.activeElement.blur();
            }, 50 );
        } );
    };
</script>

We’ll get this fixed in the next version.

Thanks!

[Fredrik]

It definitely did. Thanks 🙂

[Tom]

No problem!

[Author]

Posts