Mobile Navigation

Learn how to make sure your navigation on the 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.

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.

Stacking Order: For the mobile nav menu canvas, you will want to make sure it has a stacking order 1 number 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. 

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) 

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 the click action 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 and your close menu text or icon for which we have used the "x" in this example with the add action shown above

Did this answer your question?