Dropdown menu change position & stays open on other menu choices

Hi there,

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

It happens in all major browsers.

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.

Hi there,

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

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.

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

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

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 :)

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

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.

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? :)

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!

It definitely did. Thanks :)

No problem!