Create An Animated Hamburger/Menu Icon In Webflow (100% In Webflow) | Updated For 2023

**Update 6/20/2023**
A fix/better way to apply the animation on nav bar opens instead of on click of the button
Here a read-only for example
preview.webflo...
Join me as I walk you through my process of creating an animated hamburger/menu icon completely in Webflow.
These have been increasingly popular since the advent of Lottie and the bodymovin plugin for After Effects. For those of you who want to create your own animated icon without having to open After Effects, I created a quick tutorial demonstrating how you can create your own animated icon using div blocks in Webflow.
Disclosure: There are affiliate links below, and I may receive commissions for purchases made through these links.
Tools/Resources I'm Currently Using :
💻 Apple 2023 MacBook Pro Laptop M3 chip
amzn.to/47iLnyh
---------------------------
👉 Access the world’s largest library of Figma & Webflow components
library.relume...
---------------------------
👉The SEO Plugin for Webflow
Audit, score and optimize your website right in the Webflow designer.
www.semflow.co...
---------------------------
👉Try Webflow
webflow.grsm.i...
---------------------------
👉 Test your websites on 2000+ browsers with LambdaTest
www.lambdatest.com?fp_ref=brian22
---------------------------
👉 Tired of wasting thousands of hours starting from scratch on every project and rebuilding the same components? Check out Untitled UI. Save thousands of hours, and level up as a designer.
untitledui.lem...?aff=p27pE
---------------------------
👉Sonduck Film Motion Graphic Templates
www.sonduckfil...
---------------------------
👉 Envato Elements
1.envato.marke...
---------------------------
#webflow

[@brianlove28]

Update 6/20/2023
A fix/better way to apply the animation on nav bar opens instead of on click of the button
Here is a read-only for example
preview.webflow.com/preview/custom-hamburger-icon?preview=43d37b2f91fd2fadb2c0d9e56a59ab7f&workflow=preview

[@nicolaspettini3143]

Great tutorial with interesting info! Animating a hamburger menu icon seems way easier now thanks to your guidance.
Thanks for sharing this.

[@brianlove28]

Glad to hear you got some value from it...thank you for watching and really appreciate the kind words

[@dbertovi]

Extra. Simple and logical. Thanks! Cheers.

[@Neoproxima]

Really good thanks Brian !

[@alexduran8808]

sick!

[@allanha3253]

Thanks for this. The only quirk with the on click is that when someone clicks on the page to close the menu, it doesn't animate the menu close. Would you know how we could make it run the close animation when the menu closes without click on the menu button again?

[@brianlove28]

Hi there,
Ahh, you're right...my apologies. Thanks for catching that.
Was more thinking of the icon animation
A fix/better way to apply the animation on nav bar opens instead of on click of the button
Here a read-only for example
preview.webflow.com/preview/custom-hamburger-icon?preview=43d37b2f91fd2fadb2c0d9e56a59ab7f&workflow=preview

[@louislowstress]

@@brianlove28 Thanks for your content, that is really helpful.

[@milbosclip]

Hi Brian,
Feel like a noob but would you have any idea why my "top" div block isn't reducing size to 24 px wide and 2 px high after I change the settings. It's like the width and height aren't doing anything. So when I then add a fill colour I get an entire square filled with the colour and not the 24x2 line.
Cheers

[@milbosclip]

I seemed to have solved it. I created the same type of div but on the desktop breakpoint and not the tablet breakpoint. Then copied and pasted it into the tablet breakpoint where I need to use the hamburger icon.
Was I supposed to have done it on the desktop breakpoint somehow, even though I don't intend on using the hamburger menu there?

[@milbosclip]

Have got it to work and it's great. Thanks for your help!

[@brianlove28]

@@milbosclip Hey there sorry I didnt get back in time
Glad to hear you got it to work

[@pilot341]

saying there Menu Button add to our burger icon or hamburger menu div.