Mobile Navigation

Make sure the navigation for your mobile design is set up and working properly

Jeff Willems avatar
Written by Jeff Willems
Updated over a week ago

Your mobile navigation should come set up properly to work by default in your chosen site design. However, if in the process of building out your site, it throws the mobile navigation out of whack, here is how you get that set back up.

Getting Started

First, let's look at the canvas settings we need to make sure are applied to the actual mobile menu canvas, this is the canvas that pops up to display your site navigation options. In this example, the canvas is named "Mobile Nav" but may vary in your specific design.

Mobile Nav Settings

Stacking Order: For the mobile nav menu canvas, you will want to make sure it has a stacking order higher than any other canvas in your site design. This ensures that when a visitor to your site clicks the menu icon the menu will display over the rest of your mobile site content.

Sticky Setting: The mobile nav should be set to sticky to top, this way combined with our stacking order setting, the menu will display at the top of the user's mobile device, above the rest of the site so they can select their menu option of choice.

Hidden to Start: Make sure to check the hidden to start box for your mobile nav canvas so it doesn't show all the time at the bottom of the site design, rather only when the menu is triggered.

Menu Icon Settings

Next, let's look at the settings for our hamburger menu icon which will trigger our hidden Mobile Nav canvas.

1) Make sure your hamburger menu icon is added and placed where you like it.
2) Use the add action feature in the click action tab to choose additional click options.
3) Set the added click action to Show Canvas > Mobile Nav (or the name of your mobile nav canvas if it is called something else.)

Mobile Nav Menu Links

Now that your menu is set up, you will need to make sure to have the correct add action applied to your mobile nav menu options.

In order for the triggered hidden canvas to once again be hidden, it must be told to do so with a click action. To do this, simply apply a similar click action as pictured below to each menu option and the X that closes your menu.

1) Set each menu item with the proper click action to link to its corresponding location.
2) Set every menu item, including the X icon to close your Mobile Nav with the action Hide Site Canvas > This Site Canvas.

Did this answer your question?