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.

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.

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.

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.

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