Menu Button on mobile not working properly

Hello!

So my nav menu button isn’t working properly on the mobile view. It will let me click it to open once and any time after that viewing from my phone or other phones it will not let you open it again. Any ideas?

http://heppners.webflow.io/

https://preview.webflow.com/preview/heppners?preview=59fd24bc01262a0c76017c34f0adf82b

Any ideas? Is it a bug?

@waldo would you know?

Hey @Quantumgo I took a quick peek at your site and it looks like you could possibly have some conflicting interactions on the navigation such as the negative margin on this element:

And this initial appearance interaction:

If you have any interactions setup on your Nav Menu or your Menu button that could definitely cause an issue.

Please let me know if this helps, if not I’m happy to help further :smiley:

@Waldo, that’s for the nav-scroll that I only want to appear on the desktop, I have it set to these settings on all my other sites and it doesn’t do this? I have a Nav and a Nav-scroll. Nav-scroll I only use on the desktop version.

@waldo if I turn off the interactions on the mobile version it turns the interactions off not he desktop as well. I want them to stay on the desktop version.

Can someone please help me? I need this finished asap :tired_face:

It appears it’s doing it on ALL of my webflow sites now. Not just this one, they worked just fine a few days ago.

please someone help me, even if I change the settings of the nav-scroll to the same as navmenu it’s still not working.

Who is an admin or person who works at Webflow on here?

@Waldo

here’s one

https://preview.webflow.com/preview/heppners?preview=59fd24bc01262a0c76017c34f0adf82b

https://preview.webflow.com/preview/american-models?preview=a38e07d3fc30ba538d01dc338bce03b1

https://preview.webflow.com/preview/lets-vape-llc?preview=5c88471ef43e088e207ee2b8b1e80aa6

https://preview.webflow.com/preview/dukes-pizza?preview=754d287285e69408921fd2dd85008272

These ones below worked just fine before I went into them a few days ago and changed things on the site (didn’t change the nav at all)

https://preview.webflow.com/preview/the-guitar-shop?preview=3f315da7162a2ec71d7a7a4e2dc0e212

https://preview.webflow.com/preview/all-seasons?preview=7e6f6267579b7efa7223d76a923292c0

If I turn off the interactions it turns them off on the desktop too which is where I NEED them on.

Hey @Quantumgo thank you for reaching out again. No need to panic :smile:

I took a look at your menu structure and noticed that you’ve duplicated the “Nav Menu” element which can definitely cause issues with your mobile nav due to redundancy as the menu open interaction is then bound to both elements. There are also no height/width styles set on your nav menu elements which can cause issues as well.

Can you please try the following and let me know if it helps? Be sure to adjust the height of the nav-menu accordingly for tablet & down (try a width of 100% and height of 100vh)

(1) Try adding a height & width setting to both of the navs and remove the display styles which you’ve added on those elements.
(2) Instead of negative margin on an element, try positioning the element with bottom: -58px

Please let me know if this helps, if not, I’m happy to help further :smiley:

@waldo thanks so much!

1 Like

Hey @Quantumgo my pleasure to help :smiley: I just wanted to confirm did the above post resolve the issue? :smiley:

@Waldo, yes it did! IT’s weird though cause I never had to do it this way before to make it work! I’m going to try this one the other ones as well to make sure those work!

1 Like

okay so something weird is happening to the nav on this site:

https://preview.webflow.com/preview/american-models?preview=a38e07d3fc30ba538d01dc338bce03b1

Both navs aren’t lining up the same way… I can’t figure out why.

Oh I think i got it!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.