From this tutorial, you will learn how to make a Mobile Menu. 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.

   The following video tutorial was made with one of the previous versions. We are updating the videos. 

Responsive Menu

Nicepage supports all required features for your website to look modern and be usable on various mobile devices.

Like on all modern sites, the Nicepage Menu can change to a Hamburger Button, which visitors can click on to see site navigation, social icons, search input, and content output from WordPress widgets or Joomla modules.

With Nicepage, you can customize the Menu for each Mobile View. Please also watch the video about the Responsive Modes.

Hamburger For Desktop View

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 Desktop.

1. In the Nicepage Editor, select the Menu.
2. In the Property Panel, click the Hamburger Button Tab.
3. Go to the "Hamburger Button For" property.
4. Move the value slider to the left of the Desktop Icon.

You see that now there is a Hamburger Icon shown for all devices.

Edit Off-Canvas Menu

You can see the Off-Canvas Menu when you click the Hamburger Menu Icon.

1. Click the Hamburger Icon to select the Menu.
2. Go to the Property Panel.
3. Click the Menu link to go back to the Menu Properties.
4. Select the Hamburger Panel Tab.
5. You see the Off-Canvas Panel.
6. there is also shaded Content.
7. You can change the width of the panel by dragging it.

Adding width to the Off-Canvas Panel for Vertical Phones may be useful.

Add Elements To Hamburger Panel

You can move the Menu Items in the Off-Canvas Panel and add Elements.

1. In the open Off-Canvas Panel, move the Menu.
2. You can add Elements only to the Off-Canvas Panel and not to the Shaded Content area.
3. Add Positions and Widget Area to output content in WordPress or Joomla.
4. Select Add Element -> Position and Shortcode -> Position and Widget Area.
5. Specify the Position Name.
6. You may also watch videos about using Widget Areas and Positions for more information.
7. Additionally, you can add any Element.
8. For example, click Add Element -> Social Icons.
9. Click Preview.
10. Click the Hamburger Menu Icon to open the Off-Canvas Panel.

Screen-Wide Hamburger Panel

You can use the 100% Width for the Hamburger Panel, making it screen-wide. You can also center the Menu on the screen by dragging.