The menu button is an element inside the navbar that organizes the nav links when there is limited horizontal space, like on a mobile device. It’s sometimes referred to as the “hamburger menu.”

The menu button and its functionality are built into the navbar element, and can be accessed and configured in a number of ways. We’ll cover four aspects of the menu button:

1. Triggering the menu
2. Setting which breakpoints the menu displays on
3. Animating the menu
4. Styling the menu button

Steps in the video:
00:00 – Introduction
00:34 – Trigger
01:37 – Visibility
02:20 – Menu types
03:38 – Styling

———-

Get started with Webflow:
https://help.webflow.com/courses/getting-started

http://webflow.com
http://twitter.com/webflow
http://facebook.com/webflow

source

25 Comments

  1. I dont see menu button settings to access the "open state" of the hamburger button. it only shows the "div block settings" at the element settings tab, knowing that I clicked the "menu button". any advise? I think the tutorial for this should be updated.

  2. You know who all the dislikers are?

    All the people who are using different software (me included) and realise this is superior :'D
    But I smashed thumbs up. Webflow is amaazing.

  3. love webflow, but, the menu stays open after clicking the link, its a problem specially on mobile since it cover most of the screen, cant find a way to fix this, could u help me please, thanks for the nice tutorials

  4. Thanks for your tutorial on hamburger icon. Am having problem on oceanwp header, its only showing the mobile menu on the desktop header and not my complete menu.What can I do. thanks.

Leave A Reply

Please enter your comment!
Please enter your name here