How to Create a 3-Dot Menu on Mobile

Video Tutorial

Update in progress. Back soon!

Article:

If you want to add a 3-dot menu in your mobile view for easier navigation, here’s how to do it.

  1. Firstly, source an icon for the menu. It could be 3 dots, or 3 lines stacked. In the Page Builder, click Image in the Elements toolbar and upload your icon. Then click to select and add it to the page.
  2. With your icon selected, click Show on Desktop to grey out that option. This means your icon will only be visible on mobile.
  3. Click Layers in the top toolbar, then New Layer. Give it a name like “mobile menu”, and click OK. Click Mobile to make it shown on mobile.

  4. Next, add links to your mobile menu. If you already have a navigation bar or menu, make sure you’re in desktop view and multiple select all the links inside the menu. Click the Clone dropdown in the top toolbar, and select Clone Element to a Layer. Choose your mobile menu layer as the destination.
  5. If you already have a navigation bar or menu, select your nav bar and all links and contained elements, and click Show on Mobile to grey out that option. This means the desktop version of the menu will not be visible on mobile.
  6. Next, add an X icon that will allow people to close the menu. There are two options: upload an X icon the same size as your three dots and add it as an image. Or, add a Text element, enter “X”, make the font a larger size and bold, and adjust the background settings to solid white in its Properties panel. With your X selected, click the Clone dropdown in the top toolbar, then click Clone Element to a Layer. Choose your mobile menu layer as the destination. Finally, with your X selected, click Show on Desktop to grey out that option. This means your icon will only be visible on mobile.
  7. Click Mobile to enter mobile view. You should see your 3 dots icon and your X icon. Then, click Selected in the Layers dialog to show your mobile menu layer, and your menu links should appear. Adjust text size and position to make it all look good, but don’t worry about icon positions just yet.

  8. Select your 3 dots icon, and click Actions in the top toolbar. Click to add an Element trigger. Configure it as follows:
    1. Trigger = Click
    2. Behaviour = Show
    3. Subject = your mobile menu layer
  9. Next, select the X icon, and open the Actions dialog. Add an Element trigger, and configure as follows:
    1. Trigger = Click
    2. Behaviour = Hide
    3. Subject = your mobile menu layer
  10. 10. Finally, position the X icon over the 3 dots icon.

You’re finished! Don’t forget to save your page and hit Preview. To preview the mobile view in Chrome, right-click in Preview mode and click Inspect. Click the smartphone icon and choose a device to view your page on. You’ll now be able to click on your menu and see it work.

NOTE: if you have a long menu, you need to adjust the “scrollable” and “not scrollable” property in the Layers dialog in order to make sure everything displays correctly.