Weird menu behavior when viewing on a mobile device

[lewis]

Hi there,

I just figured out how to lock the body scroll when the menu is open in mobile, and also how to change the MENU text to CLOSE when opening it. Almost.

When viewing on mobile, or in desktop in a narrow window, the menu, scroll and menu button behave erratically: body scroll works and then doesn’t, both MENU and CLOSE text can be seen on loading and sometimes when triggering the menu button, the menu closes when scrolling down then it doesn’t open/closes… Please check the full video below to see it.

Video: Weird menu behavior - YouTube

View-only project: https://preview.webflow.com/preview/aldpi?preview=88c6ce2d2be8f34d6505e7723c04d96d

What is going on?

Thanks in advance!

[Waldo (Waldo Broodrÿk)]

Hi @lewis it looks like you’re using click interactions rather than a navbar open/close interaction to animate your menu and the child elements.

If you select your navbar element while the symbol is being edited you should be able to create the animation on navbar open/close events which should resolve the issue:

Please let me know if this is helpful

[lewis]

Hi @Waldo, I added the navbar open/close interaction to the navbar and removed it from the buttons and it seems to work! But persists the forced close on scroll when the menu is open.

Now I have it like this:

Also, the open menu is partially visible when open on the designer, what have I wrong?

Thanks a lot.

[Waldo (Waldo Broodrÿk)]

Hi @lewis great job! It looks to be functioning correctly!

If you set your menu to position: absolute style then it is fully visible to make edits when it’s in the open position:

[lewis]

Done. Thanks @Waldo.

Now it’s just the force closing when scrolling on mobile with the menu open. I tried removing the js code to lock the body, but it closes anyway. Any idea why it might be happening? (It’s on a mobile device, on a narrow window on desktop works perfectly)

EDIT: solved it, it was the wrong js code