How to Webflow: Replacing the hamburger menu icon with a Lottie animation - Tutorial (2019)

[@ozwki]

For those who wants to achieve this to work fully on mobile, use "Navbar" instead of "menu-button "on animation and choose element trigger "Navbar opens" then choose your lottie

[@alldatruckus]

God bless you man I seriously had issues with this.. Your solution worked perfectly !!!

[@kragsprong]

Thank you!

[@yoannetra5372]

For those having problems with blurry and pixelated lottie, the solution I found is to not scale it but instead use the width property and overflow hidden div "menu-button". You can also try to resize the lottie file in Lottie Editor and download it to preserve the quality.

[@rubenccnv]

You are such a legend for this

[@justynasieczka9132]

Thank you so much for this!!!!

[@salmonj77]

Or you could just use em instead of px. It retains the quality and scales it nicely... try 2em as a starter and adjust from there

[@eric-rounds]

I did it! (I'm new to Webflow) and your example really helped. I had a Lottie file that looped and I needed to make it playback on click and then the second click like in your example. Thank you! Even now in 2021, the interface is fairly identical.

[@johnleighdesigns]

nice ! plus that bonus tip of dealing with files that have extra spacing around or too many blank keyframes!

[@pixelgeek]

Happy to help 😁🙇🏽‍♂️

[@masudkarim112]

Thank you so much for your tutorial

[@creativereflux4336]

Thanks for being generous in delivering good stuff. Salamat!

[@pixelgeek]

Walang anuman. thanks for watching :)

[@busimo]

You're killin it half-asian lawyer bro! Awesome!

[@pixelgeek]

thanks for watching! Also, I'm not half-asian. I'm full Filipino :D

[@busimo]

@@pixelgeek was referencing to Steven Crowder's lawyer, as a joke. You are awesome!

[@aloha2713]

There are some parts missing in the end of your video. If I click on a menue link the x is still there?

[@danielsissa]

that's true

[@ipekmoosheimer656]

yes im having the same issue

[@ayushisharma4155]

I got the same error. In the beginning, you will have to apply the same interaction on the Navbar (with a house icon) and not on the Menu Button. Keeping the rest of the steps as it is explained in the video afterward. Then it will work.

[@vladimircvejanov9970]

@@ayushisharma4155 Thank you for the info! Very helpful! :D

[@kawaiikaikun]

Once you link another page it will not matter because it would just load the next page you have linked

[@zeeshanmh215]

Thanks a bunch, Nelson! Being coming from a design background, i love your super cool explaination

[@pixelgeek]

my pleasure. thanks for watching 😁🙇🏽‍♂️

[@soundhouse7tonstudio]

Yes, if I click on a menu link button the x will stay while the menu itself is closed then. can you please show us how to solve the problem? Maybe is it possible to click on two buttons at once? Click on a menu link button clicks also the animated Nav toggle element? That would be an easy way when it is possible.

[@soundhouse7tonstudio]

@Andy Luong no sorry

[@trtle.t]

Is it required that you use a Lottie file? Can I use a GIF instead, or does it not work the same?

[@dankort]

I follow it exactly as you say, but when I second click the animation doesn't change. Furthermore, the icon is pixelated when using safari. Any idea what I'm doing wrong?

[@nathandillon5505]

Thanks man, a lot simpler than I thought it would be. Good vid!

[@nicolasmarquez5956]

Sizing it was a great idea, because a lot of lottie files are like that one! thx!

[@pixelgeek]

glad to help teach you that trick. :) Thanks for watching.

[@geisleris]

Awesome tutorials, keep going!!!!

[@pixelgeek]

Thanks! :)

[@originunknown4273]

This was very helpful. Thanks

[@pixelgeek]

Glad it was helpful!

[@GunKaraka]

Thanks mate, that was awesome

[@pixelgeek]

Glad you enjoyed it

[@rogerridpath1107]

Another great one!

[@MAli-gd8zu]

Mr.Nelson really i love your face don't know why i think because of your slogan {Make Web Beautiful Together} . Sir doing great and yeah good to know about your family.

[@Zeddings]

I had an issue that when I published, the lottie became very pixelated and blurry. Is this because of the way we scaled it? Other than that, great tutorial and easy to follow!

[@cubemusicworld]

Same problem How did you fix it

[@user-sp4fb3lb2b]

Worked perfect thank you

[@pixelgeek]

Glad to have helped 😁

[@studybeats7784]

Thank you, very helpful content!

[@darshitpatel5513]

Thank you Brother for this. Have a nice day.

[@pixelgeek]

Have a nice day

[@kragsprong]

Thanks for this!

[@selmanfit]

Genius!! thx a lot!!

[@akbarbadsha25]

thanks man.. awesome tips

[@pixelgeek]

Happy to help!

[@charlesm1173]

Thank you very much, it's working perfectly :)

[@AZ-hg4rn]

Thanks for the video! I just have a follow up question. The icon loads everytime the page loads. Goes to x and back. How can I stop that?

[@AmanSharma-dt7fh]

Thanks, You helped me :)

[@pixelgeek]

Glad to hear that!

[@mRWiil]

thank you for shared with us! :) i'm newbie

[@valeirsKi]

Hey, i have a sidebar menu and i would like the hamburger icon to move to the right 300px together with the menu. When i try to add the animation to the timed animation the whole hamburger disapears. Any idea?

[@akashchoudhary5736]

Why my menu button disappears as soon as the menu is opened !? This is so frustrating , can anyone help me with this ?

[@charlene7132]

Hi, thank you very much for this great tutorial. It worked totaly fine, but i noticed that the scaled lottiefile wors fine in chrome anf ff but is blurred in safari browser. Is there any way to fix that? Thx in advance

[@orjval]

Hi, I just want to ask if there is a way to turn a lottie I made into a button? I already imported that on Webflow, I just don't know how to link that to another page. Thank You!

[@IhorRomankov]

Everything is cool, but the topic is not fully covered. When you drag a link in the menu or under the menu, the icon does not respond and remains a cross. What should I do in this case?

[@Faint52]

Hey bud, thanks again for the glorious insight! A note- you speak to close to your mic, so all the asmr sounds are super loud and for me, it’s a little distracting. I would suggest lowering the sensitivity of your mic and talk maybe a bit further? Much love

[@pixelgeek]

Thanks for the feedback. I'll make a note of this

[@musaffahtwelve]

Lot OF thanks

[@LottieFiles]

Nice!

[@pixelgeek]

Thank you! Cheers!

[@najishaban5518]

How do I reverse direction of a global navbar menu items when in hamburger mode without flipping it on a full page mode? This is needed for Right to left languages.

[@kareemabulaban9456]

is there anyway to change colors of lottie on hover for example?

[@sassisammi]

Agreed - works PERFECTLY!!! Thanks Nelson @pixelgeek, however looks awesome on my desktop mac but super blurry/pixelated on iphone - (due to the scaling I'm guessing). Any fix for this?

[@pixelgeek]

i notice this only happens on Safari and iOS Safari. I'll make a follow up video to this soon.

[@sassisammi]

@@pixelgeek Thanks Nelson! Appreciate your ongoing support. Enjoy your weekend...

[@ssussufan]

@@pixelgeek Hi Nelson, have you made the follow up video yet? I am having the same problem :(

[@jadeg01]

@@pixelgeek any luck finding the answer to this - it was all making sense until mine was all blurry... then I read these comments so I know it wasn't just me

[@JeffErnst4]

@@pixelgeek Have you made a follow up video for this issue? Loved this video, but it's a bit blurry on my end.

[@willlozza6753]

what's the best way to invert the lottie animation colours so when the background changes, the lottie animation changes so it looks good (black to white etc)

[@immagina239]

Thank you!

[@bikeng10]

I did this animation and was wondering when you click on any part of the screen to close the menu, the icon remains as the "X". How do you trigger the menu animation to go back to the initial state when not using the icon to close the navigation.

[@bikeng10]

The solution to having the lottie icon change back to the initial state when closing the menu by clicking on the screen is to place the animation trigger on the dropdown instead of the lottie icon.

[@0ptim]

​@@bikeng10 Hey Lester I just wanted to let you know that there is a much cleaner and better solution to this. Just use the triggers 'navbar opens' and 'navbar closes' to start the according animations. This way you can be sure that the animation is always in the correct state.

[@saiharsha6207]

@@0ptim Thank you so much! I had the same issue. And followed your suggestion. It works perfectly. I found this while searching as well kzbin.info/www/bejne/lWbJe55njt2Imdk. Hope it helps someone who doesn't know where to select 'navbar opens' and 'navbar closes'.

[@nicolesalmond7386]

@@saiharsha6207 thanks so much for that link! you're a lifesaver!

[@nikitamanchenko7507]

And what will be if I will pres on some of menu links, not in a menu button?

[@stephenasonye]

Hey Pixel Geek, thanks for the video! I did exactly this but for some reason on mobile my menu icon is blurred. Any way to fix this?

[@pixelgeek]

Hmmm... Can you post your read only link?

[@stephenasonye]

@@pixelgeek preview.webflow.com/preview/stephenasonye?preview=9584bd9961eb39233a8c446ba99cc72e&mode=preview It shows that it's clear on the designer view but when I open the URL on my phone it's blurry. Also, the Lottie file still automatically plays even though I followed the interaction steps exactly how you did it.

[@PS-so5zc]

@@stephenasonye same problem on my project too.. how can I fix it?

[@James-vt1vn]

@@PS-so5zc Same with me, but only in Safari. Any solution to this, Nelson?

[@DigitalFilemp4]

did anyone solve this yet? :/

[@artemmuta3732]

It’s not very convenient that there is no way to change the styles in the slider for slide nav, will this function be implemented in the future?

[@pixelgeek]

That's true. Can you give me style examples of what you want to change the dots to? I'll make a video for this.

[@lilimxprice]

Thank you :)

[@pixelgeek]

My pleasure 😁🙇🏽‍♂️

[@lilimxprice]

​@@pixelgeek Been following loads of your videos lately, as I'm building my first Webflow website and just wanted to say thanks for all the valuable videos, really couldn't have got started in a load of the sections without you :)

[@stusmith1201]

Can you update this Tut for 2023? Webflow UI has changed

[@timth01]

First, love your videos, they are super helpful, thank you so much for doing them. On this specific one I have the same question as Abid Hajher: How do you handle the case where someone clicks somewhere else on the screen to close the mobile menu, instead of clicking on the icon again? How do you fire the close-lottie interaction so that you have the hamburger lottie in the correct state? Not being able to handle this case is a deal breaker for using lotties as hamburger icons, unfortunately. :-( Seems like you would have the same issue with a standard close/open icon as well.

[@designgood5341]

@Denny Satria see pinned comment above!

[@abidhajher7076]

What about if the user doesn't click the hamburger to close, and instead clicks on somewhere else on the page?

[@daisychavez1313]

there's a comment above that takes care of this- use the navbar opens and closes as the element trigger and follow the rest of the steps in this video the same way.

[@sykowhite9465]

doesnt work.... still have white space overflowing

[@marvin..m]

Thanks for the tutorial. It would be very helpful to know how to change the color of the hamburger to a custom color. There seem to be options on changing the background color but not the object itself. Can this be accomplished by adding custom code? A tutorial would be greatly appreciated.

[@fawesum]

Just change the background color like you would any other item on the page.

[@marvin..m]

Thanks for responding. I don’t want to change the background color. I just want to change the hamburger color.

[@fawesum]

Marvin Mattelson oops, my bad. You can change the burger itself over at the website he downloaded it from. There's an editor button there after clicking the lottie you want.

[@pixelgeek]

yup, @Fawesum is right. If you can't find the button, it's over here: share.getcloudapp.com/v1um1J4j hope this helps :)

[@LottieFiles]

You can change the color of any Lottie animation using our Lottie Editor --> lottiefiles.com/editor