How To Add a Hamburger Menu

Hamburger menu elements add easy navigation to your mobile pages. They’re fully customisable and super simple to organise exactly how you want.

To add a hamburger menu on mobile:

Click on Menu in the Elements tray in the Desktop view. A narrow rectangular box will appear on your page.
The element’s Properties panel should open. If it doesn’t, click to open the Properties panel.

The first thing to do is add some items to your menu:

With your menu element selected, navigate to ‘Menu Items’ in the Properties panel.
Type a name for your item in the Item 1 field. Click the arrow to expand the item, then choose the item type. Click to make the item:
- A link to another page
- An internal link to a named element on your page
- Open up a submenu

If you choose link or internal link, next add the destination. If you choose submenu, click to add items to the submenu.

3. Repeat these steps to add more items. Click the delete icon to remove items, or Create to add more.

Once you have your menu items set up, it’s time to make it look fancy:

With your menu element selected, go to Menu Properties in its Properties panel.
Click Change to choose the menu skin. These skins let you easily use different colours and fonts to match your page.
Use the text colour, background and font options to change how your menu looks.

Once you’re happy with your menu editing:

If you only want your menu element to be visible on mobile, select the Element and go to the top toolbar and turn off ‘Show On Desktop’.
Next, switch to the mobile editor.
Place the menu element where you would like. Notice it now shows a hamburger menu, as it switches automatically in the mobile view.
Keep the element the full width of the screen, do not decrease to just where the lines are, or your text dropdown will only show in this area.

Don’t forget to hit Save. If you wish to Preview this on mobile, clone your page and publish to a dummy URL.

On mobile, your menu will look like this: