All Collections
How to create a Hamburger menu
How to create a Hamburger menu
STUDIO Support avatar
Written by STUDIO Support
Updated over a week ago

I'll walk you through the steps to create a "hamburger menu" in STUDIO that shows and hides the menu as you click.

In this article, we'll create a layout that shows the navigation for PC size and the hamburger menu for mobile and tablet size only, as is typical for a normal website.


Creating a burger menu requires three main steps.

  1. Hide the PC-sized navigation menu

  2. Create triggers to open and close menus in mobile and tablet sizes

  3. Create a menu and link it to a trigger.


1. Hide the PC-sized menu

First, let's hide the navigation menu created at PC size in order to create a hamburger menu at mobile & tablet size.

You can set up to show or hide an element by hovering the cursor over the eye icon in the upper left corner with the element selected.

In this case, we want to display the navigation menu only at PC size (the default size), so we'll uncheck Tablet and Mobile checkboxes.

With the above, the elements are now displayed by default only, and the navigation menu is now hidden on tablet & mobile sizes.

2. Create triggers to open and close menu in mobile and tablet sizes

Change the screen size to tablet or mobile size. Then the navigation menu you just set up in 1 should be hidden.

In that area, we'll place an icon or text that will trigger the hamburger menu to open and close. (We'll use the menu icon as an example.)

We want the menu icon here to only appear in mobile & tablet size, so please select this icon and uncheck the default view.

3. Create a menu and link it to a trigger.

Create the menu we want to display to be the trigger.

To add a menu, click on "Add" from the top right corner of the editor, and then select "Modal".

This will create a new page for the menu, so please design this menu.

You can use the transitions to set the display style as you wish.

Once the design is complete, now go back to the page with the trigger menu icon you created in step 2, and set the link to the menu icon in the following way.

  1. Select the menu icon and open the link tip in the upper right corner.

  2. Then select the menu page you have just created as the link destination.

Now you have a menu that you can open and close by clicking on the menu icon.

You can apply this feature to create modals, lightboxes, drop-down menus, and more.

hamburger menu hamburger

Did this answer your question?