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
Tutorials

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?

119baf.jpg

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.

What else should I consider?

While speed, reliability, scalability, and security should be your chief concerns, Webflow offers a host (pun sheepishly intended) of other features that have a significant impact on SEO and performance, and may not be offered by most hosting services.

HTTP/2

2015 saw the release of the first new Hypertext Transfer Protocol since 1999: HTTP/2.

This new standard promises faster websites across the web — but not all hosting platforms support it yet. Because Google has always cared about page speed, there’s a good chance that HTTP/2 will become a component of their ranking algorithm soon.

Here are some benefits of HTTP/2 support/compatibility:

  • Multiplexing: Your browser can receive requests over multiple connections, not just one. Think of it like switching from a one-lane road to an interstate.
  • Header compression: Your browser loads the top of your pages first, before the rest of the page, which means your site visitors see content faster. On mobile especially, this is a big improvement.

Webflow’s hosting has been HTTP/2 compliant for a couple years now, unlike services out there. (And even hosts who do offer it typically only do so on higher-tier packages.)

Today, all assets published to a Webflow site are served via HTTP/2 — increasing page load performance when a large number of assets need to be downloaded.

Other powerful features of Webflow hosting

Everything above is more or less essential, but there are many other features that can make managing your website a lot easier and more convenient. These include:

  • Automatic backups and version control (you can also save and name a site version whenever you’d like with the key combo Command + Shift + S on Mac or Control + Shift + S on Windows)
  • Site-wide and per-page password protection
  • Simple publishing workflows
  • Responsive images
  • Protection against distributed denial of service (DDoS) attacks

On top of these features, Webflow hosting includes:

  • Form submissions (manage lead gen and let us store your data for you). It’s like Wufoo, but built into Webflow!
  • SEO and social tools: manage OpenGraph and SEO meta tags in one convenient interface. Easily combine it with the CMS to automate your metadata optimization.
  • Dynamic embeds: integrate Webflow CMS with Shopify for ecommerce, SoundCloud for music, Eventbrite for events, and anything else that uses custom code embeds.

Webflow combines all these elements in a first-class global hosting infrastructure that’s available at the click of a button. This means that when you publish with Webflow, your site’s files and assets are published across the globe and immediately ready for any amount of traffic, from any location.

Want to know how much we believe in Webflow hosting?

We put a lot of thought and effort into making Webflow hosting one the the best hosting services out there. We’ve seen Webflow-using businesses like Kisi grow their organic traffic by over 300%, while also supporting thousands of requests per second for businesses like Eventbrite.

In fact, when Eventbrite launched their Amstel Live festival page with Webflow, they received over 10,000 requests a second — resulting in over 3,000,000 page views in just one hour. Webflow hosting was able to handle it without a hitch.

But above all, we believe in our hosting platform so much so that we use it for our own websites, which see hundreds of thousands of visitors from around the globe every day, and have seen nearly perfect performance over the last year.

Waldo Broodryk

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

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.