Today, mobiles have surpassed desktops, and this trend is only growing. If your navigation is confusing, the user will simply leave. Watch this video to learn how to create a modern and simple mobile navigation that transforms into an Off-Canvas or Hamburger Menu.
Mobile devices generally have small screens, which don't leave enough space to display a full menu. Therefore, the menu is usually replaced with a hamburger button for a comfortable user experience in mobile views. By clicking the hamburger icon, you can access the Off-Canvas Menu.
Run Nicepage.
Off-Canvas Menu View
It supports all the necessary features for your website to look modern and remain 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, a Search input field, and Content output from WordPress widgets or Joomla modules.
With Nicepage, you can also customize the menu for each view.
Change Menu To Hamburger
By default, the hamburger button that controls the Off-Canvas menu is automatically enabled on mobile and tablet devices, which is 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.
In the Nicepage editor, select the menu. In the property panel, click the Hamburger Button tab. Go to the “Hamburger Button For” property. Move the value slider to the left to display desktop icons.
You will now see a Hamburger Icon displayed for all devices. Choose the Responsive Views for the Hamburger Icon.
Modify 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.
Click the hamburger icon to select the menu. Go to the property panel. Click the Menu link to go back to the menu properties. Select the Hamburger Panel tab.
On the left, you see the off-canvas panel, and on the right, the website’s shaded content. You can change the transparency or the color of shaded content.
Also, you can change the width of the off-canvas panel by dragging it. It may be helpful to add width for the off-canvas panel for vertical phones.
Add Elements To Off-Canvas Panel
Moving and adding elements to the Off-Canvas menu is one of the easiest and most enjoyable steps.
You can move the menu items in the off-canvas panel. Also, you can add elements only to the off-canvas panel and not to the shaded content area.
Just click the Add button, scroll down, and select the Header section and then Menu. This way lets you add elements to the Off-Canvas menu. Let’s add a few, for example, a search field or the Login link. You can also add positions and widget areas to output content from WordPress or Joomla.
Select Add Panel, then go to the Position and Shortcode section, then Position and Widget Area, and specify the position name in the Property Panel.
You may also watch the videos about using widget areas and positions for more information.
In Nicepage, you can find many designs that use the Off-Canvas menu. You can customize those templates and the Off-Canvas menu to match your brand and needs.
Off-Canvas Menu Styling
Let’s now stylize the Off-Canvas Menu, starting directly from the main page. Click the Hamburger Menu. Go to the Property Panel to the right, and then open the Edit Panel group.
You can modify the Width property marked with the W letter by entering a static value or using a percentage. You can also easily resize the off-canvas menu by dragging the slider to the left or right.
Hover over a smaller icon below the W parameter. You will see the text “Between Menu Items”. You can drag it with your mouse or type in a number manually.
You can choose the position of the menu: left or right. We recommend staying on the left side, as most users expect it to be there.
Submenu
Define how submenus open. Let's add two submenu items and observe how they behave.
Shading
Next is the Content Shading. This adds a background overlay behind the menu to keep the user’s focus on the navigation.
Fill
Menu Fill changes the background color of the menu panel. Try switching between different colors to feel the contrast.
Border
At the bottom, we have the Border that adds a line around the menu.
Font
The Font defines text style and properties, such as font size, font family, weight, alignment, and hover state.
Text Shadow
Text Shadow adds a depth effect to the text. It may not be needed. The key is not to be afraid to try new things. That is how a designer learns!
Preview Website
Click Preview. Click the hamburger menu icon to open the off-canvas panel.
Today, mobiles have surpassed desktops, and this trend is only growing. If your navigation is confusing, the user will simply leave. Watch this video to learn how to create a modern and simple mobile navigation that transforms into an Off-Canvas or Hamburger Menu.
<iframe style="width: 95%; aspect-ratio: 16 / 9; margin: 20px 0" src="https://www.youtube.com/embed/ahCLyTCigfk" title="Off-Canvas Menu: The Ultimate Design Tutorial" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<table width="95%">
<tr>
<td width="33%" align="left">[Previous](page:575215)</td>
<td width="34%" align="center">[All Lessons](page:1318)</td>
<td width="33%" align="right">[Next](page:557042)</td>
</tr>
</table>
## Why Off-Canvas Menu?
Mobile devices generally have small screens, which don't leave enough space to display a full menu. Therefore, the menu is usually replaced with a hamburger button for a comfortable user experience in mobile views. By clicking the hamburger icon, you can access the Off-Canvas Menu.
Run Nicepage.
## Off-Canvas Menu View
It supports all the necessary features for your website to look modern and remain 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, a Search input field, and Content output from WordPress widgets or Joomla modules.
With Nicepage, you can also customize the menu for each view.
## Change Menu To Hamburger
By default, the hamburger button that controls the Off-Canvas menu is automatically enabled on mobile and tablet devices, which is 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.
In the Nicepage editor, select the menu. In the property panel, click the Hamburger Button tab. Go to the “Hamburger Button For” property. Move the value slider to the left to display desktop icons.
You will now see a Hamburger Icon displayed for all devices. Choose the Responsive Views for the Hamburger Icon.
## Modify 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.
Click the hamburger icon to select the menu. Go to the property panel. Click the Menu link to go back to the menu properties. Select the Hamburger Panel tab.
On the left, you see the off-canvas panel, and on the right, the website’s shaded content. You can change the transparency or the color of shaded content.
Also, you can change the width of the off-canvas panel by dragging it. It may be helpful to add width for the off-canvas panel for vertical phones.
## Add Elements To Off-Canvas Panel
Moving and adding elements to the Off-Canvas menu is one of the easiest and most enjoyable steps.
You can move the menu items in the off-canvas panel. Also, you can add elements only to the off-canvas panel and not to the shaded content area.
Just click the Add button, scroll down, and select the Header section and then Menu. This way lets you add elements to the Off-Canvas menu. Let’s add a few, for example, a search field or the Login link. You can also add positions and widget areas to output content from WordPress or Joomla.
Select Add Panel, then go to the Position and Shortcode section, then Position and Widget Area, and specify the position name in the Property Panel.
You may also watch the videos about using widget areas and positions for more information.
In Nicepage, you can find many designs that use the Off-Canvas menu. You can customize those templates and the Off-Canvas menu to match your brand and needs.
## Off-Canvas Menu Styling
Let’s now stylize the Off-Canvas Menu, starting directly from the main page. Click the Hamburger Menu. Go to the Property Panel to the right, and then open the Edit Panel group.
You can modify the Width property marked with the W letter by entering a static value or using a percentage. You can also easily resize the off-canvas menu by dragging the slider to the left or right.
Hover over a smaller icon below the W parameter. You will see the text “Between Menu Items”. You can drag it with your mouse or type in a number manually.
You can choose the position of the menu: left or right. We recommend staying on the left side, as most users expect it to be there.
**Submenu**
Define how submenus open. Let's add two submenu items and observe how they behave.
**Shading**
Next is the Content Shading. This adds a background overlay behind the menu to keep the user’s focus on the navigation.
**Fill**
Menu Fill changes the background color of the menu panel. Try switching between different colors to feel the contrast.
**Border**
At the bottom, we have the Border that adds a line around the menu.
**Font**
The Font defines text style and properties, such as font size, font family, weight, alignment, and hover state.
### Text Shadow
Text Shadow adds a depth effect to the text. It may not be needed. The key is not to be afraid to try new things. That is how a designer learns!
## Preview Website
Click Preview. Click the hamburger menu icon to open the off-canvas panel.
## Related Article
[Off-Canvas Menu](page:82683)
