Hi there,
I’d like to customize the hamburger icon to be one that animates into an X, as displayed here:
http://codepen.io/markmarkmark/pen/inbfd
I’ve tried to add the css (head) and javascript/jquery (end of body), using the built-in ‘menu-button.’ The burger/animation doesn’t show…Can anyone help me with this?
Here’s a link to my progress:
https://webflow.com/design/keygordontestersite?preview=d7e1abdaa3c59282d04381420684bed8
Thanks,
Mark
@Mark_Suarez Hey Mark, check this livehelper page
http://livehelper.webflow.com/#hamburgeranimation it uses exactly as codepen link you posted.
And here is the public link so you can observe element properties you need to change to achieve same result. https://webflow.com/design/livehelper?preview=64db81b7f9f1dcb5fe0be42d89a14d89
And also read explanation below.
Notes that you only need few changes from default Navbar widget once you added it to get the result.
Gives your ‘Menu Button’ element a class named burger-box
Set a class to your original icon named ‘original-hidden-burger-icon’ or whatever you like
Now, add interaction for your ‘original-hidden-burger-icon’ to hide it. Add Initial Appearance as Opacity 0%.
So you get result as image below
Last thing is add a Div block right below ‘original-hidden-burger-icon’ and set a class name ‘burger’. Set its width and height 30% and for visual helper only I gave a background color there.
Now about CSS and JS part. We put both before /body tag. Check livehelper’s Custom Code part.
That’s all. I believe you can make your own hamburger animation.
Let me know your result.
Cheers.
Hey Pasti,
This worked beautifully for me. Thanks for your help.
And thanks for being such a great resource to the forums!
I added these bits so that when you click on the nav links, the class’open’ is reset, even if you click a null link.
( document ).ready(function() {
(’.burger-box’).removeClass(‘open’);
});
(function() {
(’.w-nav-link’).click(function(e) {
e.preventDefault();
$(’.burger-box’).removeClass(‘open’);
});
});
Great Mark. And very nice added there. Absolutely useful. Thanks to share that.
Hi pastiwibawa, can you kindly share how you made your Just layout. Page switching is not allowed, so I can’t view it. Other tips and extra code you did could not be accessed too. Thanks. Beautiful resource.
cool beans. thx 
Hi @topelovely Actually you can switch the page with a trick 
Once you open that public link, switch to Preview Mode and click ‘Just A Layout’ link on top and then switch back to design mode.
I have done it without any external script so you can find everything you need in navigator. However I didn’t made it for responsive mode… yet.
Cheers
I was able to get this to work… but… this doesn’t seem to work if you set the burger icon to show only on tablet and mobile using the slider option in the menu settings. (which is probably the way most people would have it set)
I’m assuming this changes the selector names so they no longer are the same as what’s used in the css. - but not sure.
Anyone know how to make this work if you don’t want the burger icon to show on desktop?
Hi Pastiwibawa, the link is not going to the “just a layout” page in webflow preview. Basically non of links at the top is working. So I couldn’t do the trick suggested.
@topelovely Have no idea if it is not working on others but myself (bcause I own it?) See image below I opened it as read only.
So that’s the elements look. It is not a webflow navbar but was a div block with Nav HTML tag. Maybe I should made it with webflow navbar widget for better. However, here it our offcanvas ‘navbar’ properties
Next thing is I gave it interaction named it Toolbar.
Here are details of both interactions
Look at 2nd interaction, that will affect content-frame element, that is the section where all content is where all header, contenta, contentb and footer placed. Here is its properties. Nothing special tho.
content-frame itself has intial interaction as below
That’s it I guess. Hope it helps.
Cheers
Hi,
where can i find the custom code?
i cant switch to custom code dashboard.
@MDMR The code is from codepen as original poster wanted as below
Here is the code used on Custom Code dashboard
<!-- Hamburger Animation - Burger icon animated to X demo -->
<!-- source: http://codepen.io/markmarkmark/pen/inbfd -->
<script>
$(function() {
$('.burger-box').click(function(e) {
e.preventDefault();
$(this).toggleClass('open');
});
});
</script>
<style type="text/css">
.burger,
.burger:before,
.burger:after {
position: absolute;
top: 28px;
left: 18px;
width: 24px;
height: 4px;
background: #333;
-webkit-transition: background 0.3s, -webkit-transform 0.3s, top 0.3s;
}
.burger:before {
top: -8px;
left: 0;
content: "";
}
.burger:after {
top: 8px;
left: 0;
content: "";
}
.open .burger {
background: transparent;
}
.open .burger:before {
top: 0;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
}
.open .burger:after {
top: 0;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
}
</style>
I have been looking into this but can’t get it to work for me. Honestly. Can you kindly do this separately (Like as a new website. Maybe it would solve the issue we’ve been facing trying to share the public url) and share Pastibawa? I am looking at something like this for a small online magazine and it is stalling it.
Looking forward to your usual valuable contribution. Thanks.
See: New concept and prototype for IMDB
Actually I’m looking at how he structured the flyout when you click the News Menu and it pushes the content. That to me is exceptional. Can you kindly assist as I have been able to restructure stuff in webflow taking a lead from your screen grabs.
Thanks so much Patiwibawa. I thought i wouldn’t be able to do it. But looking at your screenshot. I saw what I was doing wrongly.The only hitch is the flyout.
Looking forward. Thanks.
@topelovely I think you better make it as a new topic since this thread is discussing hamburger icon I will make one as you asked for there
Cheers
Hello guys,
i followed @pastiwibawa tutorial on how to animate the hamburger icon, here is a short video of me doing just that > http://quick.as/ob6quzyr
Now for the record I am like many on here who was attracted to Webflow based on the fact that I have no experience with coding etc, I am more of a designer at heart (will be learning some JS and jQuery now)
You will see this lack on knowledge in my video haha… so guys what am I doing wrong? can someone please tell me how to make an animated hamburger icon
Thank you,
Steven
Hi Steve
You must put all the code like I have put on post number 12 above there. What I have seen on your video you missed some parts of code that you got it showed on your page.
Try it and let us know if it works.
Cheers
Cool stuff this!
I got it all working, but my hamburger icon stays as an “X” when i click outside the menu to close the menu. It doesn’t revert back to the original hamburger apperance. This happens on in the desktop mode and on mobile it doesn’t revert back to it’s original state at all.
Somebody got a clue on this? Do I need to add something to the JS to make it revert back?
Check it out at: balanserat.webflow.com/old-home
Hi everyone, sorry for the delay on the answer this. I’ve figured it out somehwhat so I’m just going to put some CSS and JQuery below. The key is to use the built-in javascript from the nav menu component. When you click on the out-of-the-box hamburger, it adds a class to the button called ‘w–open’. What we’re going to do then is piggyback off of the already written JS of the default component.
So, then, all we need is to add the following css (no javascript) in the custom code, that’s it:
Demo
Add a class of ‘burger’ to the hamburger icon element
Put the following in the custom code
<style type="text/css">
.burger,
.burger:before,
.burger:after {
position: absolute;
top: 28px;
left: 18px;
width: 20px;
height: 2px;
background: #333;
-webkit-transition: background 0.3s, -webkit-transform 0.3s, top 0.3s;
}
.burger:before {
top: -6px;
left: 0;
content: “”;
}
.burger:after {
top: 6px;
left: 0;
content: “”;
}
.w–open .burger {
background: transparent;
}
.w–open .burger:before {
top: 0;
-webkit-transform: rotate3d(0, 0, 1, -45deg);
}
.w–open .burger:after {
top: 0;
-webkit-transform: rotate3d(0, 0, 1, 45deg);
}