When customizing your website, it's important to take into consideration how your pages and posts will look like when accessed from smaller screen devices, such a mobile phones.
In this article we're gonna take a look at the steps you need to take in order to create an off-side 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:
In order 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.
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:
the modifications made on "Desktop" view will have an impact on both "Tablet" and "Mobile" view;
the modifications made on "Tablet" view will only affect the "Mobile" view;
the modifications made on "Mobile" view will not reflect on any other view.
Therefore, any change you make now in the mobile view will only be reflected on mobile devices, and not on tablets and desktops.
The first thing you will notice in the left sidebar is that the "Toggle hamburger" option is active:
This means that the system has already adjusted the menu for smaller screens, such as tablets and mobile phones.
Next, use the available options to change the spacing, the color and any other visual elements from your menu:
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 set up, I can proceed to the final step, that will help 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 the way the menu looks like 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!