Streaming live at 10am (PST)

Hamburger menu interaction


#1

The hamburger menu doesn't transform to what it should be after second click, can anyone help me to have a look? thanks.
https://preview.webflow.com/preview/yoyoyoyoyoyo111?preview=ab093694bec8417b18f977acfecbbe93


#2

Hey @Hang_Ng

You just need to set the top & bottom menu blocks to "move to origin".

Open your interaction and go to the click actions for the top/bottom blocks. For the second click action, click on the "move" box, don't add any values and close it. It'll set the move action to "move to origin".

Job done smile


#3

i did, but somehow the hamburger menu become something like this.


#4

Hey Hang

Can you publish an updated link for me to check out? I'll see if I can identify the problem


#5

here you are.
https://preview.webflow.com/preview/yoyoyoyoyoyo111?preview=cef0fd74552e9e9a6af329a651c6e1b3


#6

Thanks Hang

Neither the top or bottom hamburger elements are showing as "move to origin" on second click:

All you need to do here:
1. click on the current second click interaction (your existing rotate 0 degrees)
2. click on the move button. Don't add any movement values, just let the window open, then close it.

You should now have an interaction title "move to origin" added as below:

This will ensure that your menu elements return to their original placements when you close the menu.

Just do that for both the top and buttom hamburger animations & it should look great. Just tried on your preview link & it worked just fine smile


#7

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