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: Webflow - Backbone Structures

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

1 Like

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

1 Like

@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: Webflow - Backbone Structures

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…

1 Like

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…
1 Like

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!!

Hi there,

Here is the setup that you need
Hamburger Open:
12%20PM
You don’t need opacity or scale all you need is hide/show and move - just make sure the show takes 0sec and it happens before move.

  1. for initial state you set (1) “menu flyout” move X=100% and (2) Hide/Show to “hide”
  2. for the middle of the animation set (1) “menu flyout” Hide/Show to “block”
  3. for the end of animation set (1) “menu flyout” move X=0%
    *note make sure that the selector stays in % sign and try playing with easing - for example set to in/out quint - will make the animation look good

Hamburger Close:
32%20PM

  1. you don’t need an initial state.
  2. set “menu flyout” move X=100%

if the animation still is not working try to go over it and right click on each element and chose “choose different target” and re-select the correct element that should be affected… when I tried it on my end it was all working just fine.

1 Like

@IVG this is all perfectly working now, just still unsure how to get the ‘Close HMB’ animation to work when i click on each menu item…
the website is scrolling down when i click on each menu item but the fly out menu isnt closing, even when i add the ‘Close HMB’ animation to the menu items

Any clue?

Thank you so much

1 Like

so what you need to do is this:

you have an interaction for each of the items in your menu, so edit each interaction and add the animation steps that close the HMB button and slide the menu out.

I think that’s what I have though,

Each menu item has an interaction (applied to the class ‘HMB Menu Items’) that closes the HMB button and slides the menu out, but nothing is happening…

Hello there. I am just getting around to seeing this. Thank you all for helping solve the interactions problem.

@lamisilva.studio - There is no easy way to reset interactions to their initial state without actually creating another interaction to do so. Which means every time you change a state in one interaction, you have to account for that state change in other interactions that might affect the same elements.

In this case, when you set the nav link function to close the menu (in order to allow the screen below to be viewed by the user) you do not account for resetting the initial menu-lines position. What you need to do is create a seperate “close menu” interaction. (I suggest duplicating the original one) and then customize that interaction for the menu buttons but add the steps needed to reset the menu-lines to their initial position.

This will not however fix the fact that you will still end up having to double click the menu button to get your menu to close/open as intended again at some point because there is a second click trigger on the menu button which will not reset dynamically. To do something like this, I typically set up two (identical) trigger elements, and then toggle their visibility/position inside of the interactions in order to only use a first click trigger on each element. This way no matter what the user does, each trigger can only do one thing. Either open or close the menu.

You can find a cloneable element like the one I just described here - Responsive Sidebar

The sidebar contains some pretty complex interactions too, so be careful if you go clicking around in there.

As you can see by this simple menu instance, even changing a menu bar width by a few pixels can change the nuance of the animation.

Feel free to reach out directly with any other questions.

@lamisilva.studio

Hi, I agree with @Raymmar - its an easy solution, to do this:
Do not reuse the interaction of the HMB Open/Close - create a new interaction, lets say “link close menu” and then add all the steps for reversing the HMB button to open state and slide the “menu flyout” to X=100% and add that interaction to each of the link elements.

I tested it and it works

1 Like

@IVG @raymmar

all working now THANK YOU!!
You’re the best and I cant thank you enough for taking the time to help me out :slight_smile:

:blue_heart::blue_heart::blue_heart:

1 Like

Thanks for fixing my issue too! I was having issues with the first click just flipping the hide/show state. Turns out it was the initial state on the closing animation that was buggering it up. You rock!