How to Create an Animated Burger Menu in Webflow

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to create an animated burger menu (hamburger → cross) in Webflow without a plugin.

Example

1. Create the burger button

Create a Div burger-btn containing 3 Divs: burger-line-1, burger-line-2, burger-line-3. Each line: width 24px, height 2px, background in your color, margin-bottom 5px. Add cursor: pointer to the container.

2. Add the transition CSS

.burger-line-1, .burger-line-2, .burger-line-3 {
  transition: all 0.3s ease;
}
.burger-btn.open .burger-line-1 {
  transform: rotate(45deg) translate(5px, 5px);
}
.burger-btn.open .burger-line-2 {
  opacity: 0;
}
.burger-btn.open .burger-line-3 {
  transform: rotate(-45deg) translate(5px, -5px);
}

3. Add the toggle script

const burger = document.querySelector('.burger-btn');
const nav = document.querySelector('.mobile-nav');
burger.addEventListener('click', function() {
  burger.classList.toggle('open');
  nav.style.display = nav.style.display === 'flex' ? 'none' : 'flex';
});

Conclusion

An animated burger menu improves the mobile experience. Use cases:

• Custom mobile navigation
• Sidebar or drawer menu
• Full-screen overlay menus