Streaming live at 10am (PST)

Fly Out Menu – Mobile/Tablet

Hey all!

I’m a big webflow newbie so please excuse my question!

I cloned the menu below that perfectly suits my project: https://webflow.com/website/Simple-Menu

But I’m having 2 problems when I customise it for my website:

#1 – For Tablet & Mobile, when the menu is opened each link is supposed to take me to a page section on my scroll down website but they’re not responding once I click on them. Any idea why?

#2 – On Maymmar’s simple menu website, the hamburger bar transforms into a cross with 2 lines only, on my website the cross has 3 lines. No clue what happened… Any clue?

Thank you SO MUCH in advance for your help!!!

Thanks thanks thanks
Rita


Here is my site Read-Only: https://preview.webflow.com/preview/backbone-structures?utm_medium=preview_link&utm_source=dashboard&utm_content=backbone-structures&preview=5d9d607df4493762a5abfd4e31ab2a90&mode=preview

Hi @lamisilva.studio

So here is the solution (I think :wink: )

  1. The website scrolls just fine (just look at the scrollbar) the problem is that once the link is clicked, the full screen nav menu hides it - you need to adjust the interaction so that once clicked, the menu closes.

  2. the solution is similar to the first question - the interaction is broken - you need to adjust it so that the third bar overlaps with one of them during the navigation… so that it is hidden… need to tweak the interaction…

Hope it helps

after a quick look - in the interaction change the movements to -10px (instead of -13) - you possibly resized the div so the movements remained the same but the dimensions didnt

@IVG THANK YOU :slight_smile: it’s starting to get in the right direction!!
A new problem appeared though :frowning:

For point 1, I added the interaction to close the flyout menu, but for some reason it doesn’t complete 100% of the interaction, do you have any idea why? the hamburger bar looks like this once i click on a menu item, its like it stops at 50%. Once I second click it it goes right.

THANK YOU SO MUCH once again :blue_heart:

here’s the link: https://preview.webflow.com/preview/backbone-structures?utm_medium=preview_link&utm_source=dashboard&utm_content=backbone-structures&preview=5d9d607df4493762a5abfd4e31ab2a90&mode=preview

Hi, so it looks like your interaction is broken again, and it is possible to go through it and fix it, but rather it may be easier to make a new one from scratch - it will have the benefit of you knowing how to do it and it will be clean… so I made a little video for you on how to do it, and once you understand it it will be much easier to fix other ones or do your own. Hope it helps…

vis-a-vis your existing setup this happens because of the following -
your current setup works like this:

  1. click1 on HMB - opens the menu if your do 2nd click on HMB it closes
  2. if you click on menu item it has a different animation - which scrolls the viewport and closes the menu - but, it does do the HMB Close animation so it stays in the open state so the next time you click it it does HMB Close animation…

Thank you so much @IVG
I was away this week but will give this a try now and hopefully get it fixed.
You’re the best, thank you !!!

@IVG the video was so helpful, thank you so much for being such a wizzard and taking the time to help me.

All in track now! the last thing is that I just cant seem to figure out how to make the fly-out menu disappear properly when clicking on a menu item. Whatever I do I keep having the same problem of it working but the HMB remains in its open state… any idea how to fix it pleasee ?

Currently just have a show/hide animation to make the menu disappear once an item is clicked but the HMB remains in its open state in the corner

again, cant’ thank you enough!!