Keep an eye on your inbox!
Hmm, that didn't work. Try again?

How to customize your hamburger menu in Webflow

Learn how to make your hamburger menus your own—without writing custom code.

Waldo Broodryk
March 23, 2016

You’ve seen some pretty snazzy hamburger menu animations out there on the internet. And chances are, you’ve wondered if you can build them in Webflow—and if you can, how.

What if I told you that you can build many of those animations right in Webflow, using nothing more than the Navbar Open/Close interaction animation and a few divs?


You totally can. In fact, here are a few custom hamburger menu animations I created in Webflow.

Like what you see? Feel free to clone this project to use any of the hamburger menus on your own sites and learn how to build them.

How to build your own custom hamburger menus in Webflow

To build your own custom hamburger menus in Webflow, you’ll need the following ingredients:

  • A Navbar component (includes a menu button)

Inside the Menu Button, we'll add divs for the hamburger menu icon's 3 lines, which we'll call:

  • Top Line
  • Middle Line
  • Bottom Line

In the following walkthrough, we'll build this hamburger menu:

The custom hamburger menu we're about to build.

Step 1: Add a Navbar element to your design, and style the nav and menu button

Give your Navbar a class name and change its default background color to transparent by setting the opacity to 0.

Screenshot 2016-03-22 10.36.58.png
Set the background color of the Navbar to transparent (opacity 0%).

Give your Menu button a class name and a set width and height. For this example, I’ll use 60px width and 60px height.

Step 2: Delete the hamburger icon and style the menu button

Delete the hamburger icon (the three stacked lines) from your menu button—we’ll be replacing them with our own design—and give the button whatever background color you’d like (in this example I used blue). Then remove the padding from your menu button by setting the padding to 0px on all sides.

Pick a background color for your menu button that helps it stand out from the page.

Step 3: Start customizing your hamburger menu

Now add three Div Blocks to your menu button and give each of them a different class name. I used Top Line, Middle Line, and Bottom Line.

Give each div a set width and height (I used 40px width and 2px height on all three), then set their position to Absolute Top, and center them by setting the left and right margin to auto.

Add top pixels as appropriate for the positioning of each element. And be sure to set a background color too (I used white).

For my design, I’ll use the following top pixel settings to create 10px of space between each line:

Top Line: 18px from top

Middle Line: 28px from top

Bottom line: 38px from top

Here’s what the Styles panel looks like for my Top Line:

Styles for the Top Line element.

Step 4: Add a Navbar interaction to affect the lines in your hamburger menu

Select your menu button, switch to the Global Objects panel, and add a Navbar Interaction Trigger. Set the Navbar Interaction Trigger to affect a different element, and type in the class name of the element it should affect (in this example, Top Line).

Add a Navbar Trigger to affect different elements for each element inside of your menu button

Now, style the Navbar Open and Navbar Close states of the Top Line element. Check out the screenshots below to see how I styled the interactions for all three lines.

With the Top Line interaction defined, repeat the above steps for each line in the menu (Top Line, Middle Line, Bottom Line).

By now, the Interactions section of your Global Objects panel should look similar to the screenshot below, with 3 Navbar Triggers that affect other elements:

You can add several instances of the same trigger to affect different elements.

Top Line Open State

Top Line Closed State

Middle Line Open State

Middle Line Closed State

Bottom Line Open State

Bottom Line Closed State

Step 5: Preview the design and interactions

Switch over to Preview Mode to make sure the elements are behaving as expected and make any tweaks you might need.

Step 6: Share your work

Marvel in your brilliance and share your work with the Webflow Community in our Forum’s Show & Tell area, or on Twitter with the #MadeInWebflow hashtag.

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Waldo Broodryk

I'm a web designer and Webflow evangelist. Follow me @waldobroodryk

You might also like...


Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free


Bring your wildest web designs — and client sites — to life, without writing code.


Build completely custom content structures for client sites and prototypes.


World-class web hosting at your fingertips, without all the usual hassles.