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 Page" from the page menu when you are not selecting any elements, 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, we will now return to the page with the menu icon for the trigger we just created and set the trigger on the menu icon.

Select the menu icon and open the links panel in the upper right corner.

Then select the link to the menu page you just created.

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.

Did this answer your question?