How do I change the hamburger menu animation?

Hi everyone

I have little programming experience and I saw a very nice Apple based mobile menu, but I was wondering how I have to change the hamburger animation to another one I have seen somewhere else.

Here is the link to the mobile menu:
And here is the link to the animation I would like to put in (third one - squeeze) :

Any help would be appreciated!

Thank in advance guys


Hey Sebastian,

You should be able to simply copy across the related html, css and js from that codepen into your site, if you’re not using sass then you’ll want to compile that to css before hand.

About combining the two you’ll want to look at the DOM inspector and see what’s changing.
When you click the Apple style menu, .header gets a menu-opened class applied which shows the content
When you click the second one .hamburger gets a is-active class added, you’ll need your js to include both of these things and they should work well together, give it a shot and report back.

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