Webflow Burger Menu Build & Animate

[@markminciong]

4 years and you're still saving people who want to learn hamburger menus. Thank you, Joseph! I've been trying to learn the foundational way how to create hamburger menus. This solves that. Appreciate it man! And I hope you're doing good these days

[@josephgraham6098]

Your style, delivery and explanations are fantastic. Great tutorial.

[@josephberry4188]

JOSEPH GRAHAM thanks Graham, Im working on some new content. Stay tuned

[@omarvidic18]

welcome back! was just about to message you that you've been missed! thanks for this, looking forward to more content and the masterclass, definitely interested. all the best!

[@josephberry4188]

omarmb thanks dude. Yer been bit of mad start to the year so just trying to get my feet on the ground again.

[@johnnybecrafting9286]

I appreciate the thoughtful approach to your design. Loo fwd to learning more about your masterclass.

[@roeldekkers7451]

great to see you back Joseph! really looking forward to the next video's!

[@josephberry4188]

Roel Dekkers Thanks Roel, good to be back. Things are a bit crazy but just wanted to put together a quick video for your guys.

[@AndrewAndersonfr]

Very good tutorial JB ! Thanks !

[@iamtommyok]

Awesome video. The background image on the overlay is great, just a subtle parallax. The main takeaway is how you start with the basic animation and little tweaks/pushes to make something much more interesting. Keep up the inspiring and encouraging work

[@josephberry4188]

Exactly that. Taking something as simple as a burger menu and working out how you can push it just the little bit further. Thanks for watching. More to come.

[@iamjiri]

awesome tutorial!

[@josephberry4188]

Thanks dude 🙌

[@priyankathakur5372]

Thank you so much for this great video.

[@CbgraficaDesign]

thanks a lot for this, I really enjoy the whole process

[@aleksaorevic536]

I have a problem, I can't move nav-link on y-axis when I want to animate. *edit: problem solved, nav-link should be display: Block. I think it's worth mentioning.*

[@ohwhatworld5851]

Thank you for this. A tip though, can you show us what it is you will be making at the start of the video? It will help give context

[@josephberry4188]

OhWhat World will keep that in mind. Thanks

[@adfadifferentfur2332]

@@josephberry4188 Yes, love your videos but that would definitely be helpful. Thanks!

[@josephberry4188]

ADF A DIFFERENT FUR definitely going to do that next time.

[@ae7680]

Thank you very much guy, it's really fine give some advanced advice like this free

[@XPilotP]

This is exactly what I needed. Maybe add an animation for the menu button

[@mathanraj496]

Wow this is awesome. Can u make tutorial like horizontal scroll (Apple iPad pro)

[@iviixio]

You are super inspiring sir 💙

[@ronnyt5914]

oh i love it, one question, my nav-link Text isn moving when i try to set up the animation. i stuck on that for now

[@rosiuiux]

Thank you 🤗

[@BeccaCollins-q9w]

Awesome tutorial! I'm having an issue that now the expanded nav menu shows as the top layer of everything in the Webflow editor, so I'm unable to edit my site unless I set the visibility of my menu layer to hidden..which I don't want to do every time I made a change. Do you experience this?

[@iDATUS]

I seen a lot of burger animations and custom menus etc but they dont actually test them. The modal was the missing link for me. Thanks.

[@arpadracz-fodor3864]

Cool stuff as always. Btw I promise I'll be the first to sign up for your course, just please tweak your camera and audio setup a little bit :D

[@josephberry4188]

Árpád Rácz-Fodor I have a studio that I will be using so the video will be crisp and the vocals tight. Will be doing full production. These videos are just quick and dirty I would love to invest more time but at the moment it's difficult.

[@arpadracz-fodor3864]

@@josephberry4188 Nice, can't wait for that!

[@kasperwichmann3356]

How do you make the magnetic burger menu effect you were talking about?

[@MrSpertuzm]

SR love you content, your work and your healp

[@josephberry4188]

Sebastian Pertuz glad to be off help. Keep pushing those animations 😎

[@SeeingThroughFilm]

webflow course by Guy Ritchie lol...great work mate.

[@krishneide]

Great tutorial, thank you. I'm using it for a school project. I have a question about making the menu a symbol, to use in all website pages. How would I go about it? Should I create separate symbols for menu-parent and menu-overlay? Or should they be all in one symbol (I'm not even sure if I can do this)? Thank you very much

[@StanOwden]

Thanks for your work Joseph. Appreciate the effort you put into your videos. Haven't seen you on youtube for quite some time. Hope you are doing well. If you do read the comments, may I ask you for a favour: to make your video on 5 text effects available for saving to playlists. Would love to have in on my webflow playlist but it is set as a Kids content and youtube is not allow you to save it. Cheers.

[@Ryan-eb3go]

Hey Joseph! Absolutely awesome tutorial. Got this working and I'm loving it. Question: is there a way for the menu to be in that initial state (unseen) while I'm in the edit mode? Right now I'm unable to edit the actual page underneath it because the menu is defaulted to full screen when I'm not in preview mode.

[@josephberry4188]

Yer you need to set it to display none. And then activate this in the interaction.

[@changecollar]

I started webflow recently, i figure out you.. i think that is best

[@roeldekkers7451]

Hi Joseph! thanks for this interesting tutorial. I've got a question about closing the hamburger menu. I made a except replica of your hamburger menu and now i'm trying to use it as a navigator to different sections on the website. I've put the closing interaction on the nav links. When i click the nav link all the links dissappear as expected, except for the menu overlay. Do you know what is causing this problem? thanks in advance

[@josephberry4188]

Roel Dekkers not to sure what it could be but most likely the nav links have an interaction which is turning them off via the click.

[@farhan-app]

Television Center?!!!

[@josephberry4188]

Farhan Munim what you mean? Thats the building I work in.

[@josephberry4188]

Farhan Munim ow nice, doing what ?

[@josephberry4188]

Farhan Munim omg thats mental. I work for digitas 😂

[@coreyrmckay]

rich