When customizing your website, it's important to take into consideration how your pages and posts will look when accessed from smaller screen devices, such as mobile phones.

In this article, we're going to take a look at the steps you need to take to create an off-canvas menu for mobile devices.

Before going into the actual process, here's a helpful article if you want to learn how to use the "Custom Menu" element, that I will be using in this tutorial:

I will be using a regular landing page template, to which I've added a "Custom Menu":

Use the left sidebar options to bring changes to your menu, if you want:

To start customizing the menu for mobile devices, you first have to access the mobile view from the panel located at the bottom of the page:

As soon as you do that, you'll be taken to this view:

Any change you make here will only be visible when this page is viewed from a mobile device.

Important!

When using the responsive feature for different screen sizes, please remember that, for the three different views that you can edit ("Desktop" / "Tablet" / "Mobile"), we use a cascading rule.

This means that:

Therefore, any change you make now in the mobile view will only be reflected on mobile devices, and not on tablets and desktops.

You'll notice that the menu type has been automatically changed to "Hamburger", meaning that it's now adjusted to fit the screen size of a mobile phone.

Use the available options to edit the menu design and change the spacing, the color, and any other visual elements from it:

For example, I've changed the color of the menu icon:
​

And I've also opened the "Icon" drop-down list to pick a different icon for my menu:

The menu now looks like this:

So with all this setup, I can proceed to the final step, which helps me create a cool effect when this menu is opened on mobile devices.

In the left sidebar, look for the "Menu Display" drop-down list and open it:

I've selected the "Off screen, left" option, which means that when the users tap the hamburger icon, the menu will pop right up on the screen from the left side:

The change I made while editing my menu in the mobile view will not be applied to how the menu looks when viewed on tablets or desktops.

Now anytime someone opens my page from a mobile phone, the menu will appear on the screen from the left side when the user taps on the hamburger icon.

Hopefully, this quick tutorial will be useful to you. If so, don't hesitate to rate it with a smile below :)

Lastly, don't hesitate to check out our knowledge base if you want to read more tutorials of this type!