Custom Mobile Menu behaving strangely

[Jake (Jake Borland)]

HI everyone,

I have created a custom mobile menu by following the YouTube tutorial from @PixelGeek (Awesome tutorials BTW).

The issue I’m having on mobile is a bit weird. The menu opens but only after the 3rd click. Hit the menu hamburger (bottom right) once and nothing happens, hit it twice and the menu appears for a second then closes again, hit it a 3rd time and it opens correctly.

I’m pretty sure it’s to do with the interactions but I feel like I followed everything step by step so cannot find the why it’s behaving like.

Anyone got any ideas?

Thanks

---

Here is my site Read-Only: https://preview.webflow.com/preview/speak-institute?utm_source=speak-institute&preview=f301df667e474b925e02f0fbec0942c5

My website is: https://www.speak.ae

[rileyj_s (Riley Jones)]

Hey Jake,

It looks like the menu links are still being set to display:none within the interaction. You will need to duplicate those instances and then have them set to display:flex within the part of the interaction that you are revealing everything.

You could also clean the interaction up a bit by having the interaction effect setting on the class rather than selected element, since you are using a lot of the same classes for the elements of the interaction. This should help when it comes to managing this awesome interaction you have going on.

Hopefully this helps a bit.

[Jake (Jake Borland)]

Thanks a lot for that @rileyj_s! very new to interactions so a bit of mystery to me.

Will give that a go today cleaning it all up.

Thanks again for taking a look and the advice.