A hamburger menu is a compact navigation menu mainly used on small screens like mobile devices. It appears as an icon made of three stacked horizontal lines, and clicking it expands the hidden menu.
This article explains how to show a navigation menu that's always visible on the Default and Small (desktop size) breakpoints as a hamburger icon on Mobile and Tablet sizes.
Point: Responsive design in Studio.Design
In Studio.Design, you create responsive designs by adjusting the style for each screen width (breakpoint) based on a single page design.
You can change the layout, appearance, and position of boxes and text per breakpoint, but the content of images and text, as well as the grouping structure, are shared across breakpoints.
For more on how responsive design works and related features, check out these articles:
Before you start: Create your navigation menu
This article only covers how to build a hamburger menu using per-breakpoint visibility settings.
Please create the navigation menu that will appear on the Default and Small (desktop size) breakpoints in advance.
Create a hamburger menu
Step 1. Hide the navigation menu
Set the navigation menu to be hidden on tablet and smaller screen sizes.
Select your navigation menu.
Step 2. Place the hamburger icon
Add the hamburger menu icon that will appear on tablet and mobile.
In the breakpoint bar on the toolbar, select [Tablet]. Confirm that the navigation menu you created for the Default (desktop size) is hidden.
On the header in the canvas, add an icon box and change it to a hamburger menu icon.
Select the icon you placed and open the Layers panel.
Step 3. Create the menu page as a modal
Create the menu that appears when the hamburger icon is clicked as a modal.
Select Modal when adding a page.
Inside the modal you created, design the menu by placing boxes, text, buttons, and other elements for navigation.
Tip: Add an entrance animation to the modal
If you want to add motion when the modal appears, use conditional styles.
Select the entire modal or the top-level layer.
In the right panel, click the [Conditional Style] button, then choose [On Appear] from the [Animation] menu.
Set up the entrance animation using a template or a custom setting.
Step 4. Link the hamburger icon to the modal menu
Connect the hamburger icon to the modal menu you created with a link.
Select the hamburger menu icon on the canvas.
Check the behavior in Preview.
Set up a hamburger menu using section parts
Menus in section parts already have responsive design set up, and a hamburger menu is built in.
In the left panel, open the Add panel.
Open the [Sections] tab and choose a section menu from either Header or Footer depending on your needs. Click [Show All] to see the full list of available section parts.
Edit the box elements inside the added section part as needed.
Delete any boxes you don't need.
Adjust the design and arrangement by editing the box appearance and layout and position.
Set up in-site links on each box that serves as a menu item.
Check the display in Live Preview.
If you're editing a published site, update the site to apply the changes to the live version.
hamburger hamburger menu mobile menu hanger menu hanger burger menu burger menu hamburger icon menu button modal menu menu modal