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, in Mobile Views, the Menu is usually changed to a Hamburger Button. By clicking this button, you can open a dropdown list with the Menu Items and more.

Menu in Responsive Modes

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, clicking on which visitors can 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 Icon on Desktop View

By default, there is a Hamburger Icon 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, all the way to the Desktop Icon.

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

Off-Canvas Menu

You can see the Off-Canvas Menu when 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. And there is also shaded Content.
  7. You can change the Width of the Panel by dragging.

It may be useful to add Width for the Off-Canvas Panel for Vertical Phones.

Adding Elements to Off-Canvas Panel

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

  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. You can also 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.

Summary

You have learned:

  • How to enable the Hamburger Button in the Responsive Modes.
  • How to modify the Off-Canvas Panel.
  • How to add Elements to the Off-Canvas Panel.


<div class="video-container"><iframe width="740" height="418" src="//www.youtube.com/embed/NL6CTIgcUc8?rel=0" frameborder="0" allowfullscreen></iframe></div> # 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, in Mobile Views, the Menu is usually changed to a Hamburger Button. By clicking this button, you can open a dropdown list with the Menu Items and more. ## Menu in Responsive Modes 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, clicking on which visitors can 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](page:5249). ## Hamburger Icon on Desktop View By default, there is a Hamburger Icon 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, all the way to the Desktop Icon. You see that now there is a Hamburger Icon shown for all devices. ## Off-Canvas Menu You can see the Off-Canvas Menu when 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. And there is also shaded Content. 7. You can change the Width of the Panel by dragging. It may be useful to add Width for the Off-Canvas Panel for Vertical Phones. ## Adding Elements to Off-Canvas Panel You can move the Menu Items in the Off-Canvas Panel and can add Elements to it. 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. You can also 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](page:75808) and [Positions](page:77605) 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. ## Summary You have learned: - How to enable the Hamburger Button in the Responsive Modes. - How to modify the Off-Canvas Panel. - How to add Elements to the Off-Canvas Panel. <br>