Mobile devices usually have smaller screens, not enough to fit a regular Menu. Therefore, the Menu is generally changed to a Hamburger Button in Mobile Views. You can open a dropdown list with the Menu Items and more by clicking this button.

From this article, you will learn how to make a Mobile Menu.

Off-Canvas Menu View

Nicepage supports all the necessary features to ensure your website looks modern and remains functional across various devices. Like on all modern sites, the Menu created with Nicepage can be changed to a Hamburger Button.

Clicking this button allows visitors to view site Navigation links, Social icons, and maybe content from WordPress or Joomla modules.

Change Menu To Hamburger

By default, the Hamburger Button, which controls the Off-Canvas menu, is automatically enabled on Mobile Views starting from the Tablet view, a recommended and widely used practice.

If you change your mind, you can enable this button to show on all devices, starting from Desktop, depending on your design.

By default, a Hamburger Icon is shown for Mobile Views starting from the Tablet one. You can enable this icon to show on all devices, starting from the Desktop.

For the selected Menu Element:

1. In the Property Panel, click the Hamburger Button Tab.
2. Then go down to the "Hamburger Button For" property.
3. Move the value slider to the left of the Desktop Icon.

Edit Hamburger Panel

You can see the Off-Canvas Menu by clicking the Hamburger Menu icon, but it's not just about the Menu. For a better user experience, you need to design the entire website view while the Off-Canvas is open.

You can select the Hamburger Menu by clicking the icon and editing its properties. You can also add the Off-Canvas Panel for Vertical Phones, which may be helpful.

1. Click the Edit Panel Tab.
2. You can change the transparency or the color of shaded content.
3. You can change the width of the Hamburger Panel by dragging its markers.

Add Elements To Hamburger Panel

Moving and adding elements to the Off-Canvas menu is one of the easiest and most enjoyable steps. You can add Elements only to the Off-Canvas Panel and not to the Shaded Content area.

1. Add elements to the Off-Canvas menu by clicking the Add button.
2. Select the Header section and choose Menu.
3. Let’s add a few, for example, a search field or the Login link.

Off-Canvas Menu Properties

You can choose the position of the Menu to display it on the left or right. We recommend staying on the left side, as most users expect it to be there. You can also define how the Submenu opens. You can add submenu items to test.

Modify the Content Shading. This property adds an overlay layer over the content to keep the user’s focus on the navigation. You can change the Background color of the Hamburger Panel to get the best contrast.

You can also add the Border line around the Menu. Change the Font style and properties, such as Font Size, Font Family, Weight, Alignment, etc. Text Shadow may be used to add a depth effect to the text if needed.

Stylize Off-Canvas Menu

You can stylize the Off-Canvas Menu by selecting it on any page and modifying its properties. You can also easily resize the Hamburger Panel by dragging the slider to the left or right.

1. Enter the Width property for the W letter icon.
2. Hover over a smaller icon below the W parameter. You will see the text “Between Menu Items”.
3. You can drag it with your mouse or type in a number manually.

Widget Areas And Positions

You can also add Positions and Widget Areas to output content from WordPress or Joomla.

1. Open the Add Panel.
2. Go to the Position and Shortcode section, then Position and Widget Area
3. Specify the Position Name in the Property Panel.

You can get more information about the WordPress Widget Area and Joomla Position from the related articles.

Off-Canvas Menu In Responsive Modes

With Nicepage, you can customize the Menu for each responsive mode. For more information, refer to the article about Responsive Modes.

Preview Off-Canvas Menu

Click Preview. Click the Hamburger Menu icon to open the off-canvas Panel. Here, you can see what you created and how you can improve it, because the improvement is key to success.

Related Article

You can watch the video lesson about the Off-Canvas Menu.