Do you want to add an off canvas menu for mobile visitors? An off canvas mobile menu slides in from the side of the screen when visitors tap the toggle button, giving them full navigation access without taking up space on mobile displays.
The Navigation Menu block in Nexter Blocks lets you add an off canvas mobile menu in WordPress that slides in and out on mobile devices.
To check the complete feature overview documentation of the Nexter Blocks Navigation Menu block, click here.
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated to enjoy all its powers.
To do this, add the Navigation Menu block to the header template and follow the steps:
Note: To create the header template, you can use the free Nexter Builder.
1. From the Navigation Bar tab, select the appropriate Type, Layout, and menu.
2. Go to the Mobile Menu tab and enable the Responsive Mobile Menu toggle.
In the Open Mobile Menu (Screen Width) section, specify the minimum screen width at which the mobile menu should activate. Use this to set the breakpoint where the desktop menu switches to the mobile off canvas version.
3. If you have selected Manual Menu in the Navigation Bar, you will see two options in the Mobile Menu dropdown:
- Standard – For using a WordPress menu as the mobile menu.
- Custom – For using your custom menu as the mobile menu.
Select Standard to use a registered WordPress menu, or Custom if you have built a custom navigation layout.
Note: If you have selected WordPress Menu in the Navigation Bar, then you will only get the Standard option in the Mobile Menu section.
4. Select your menu from the Select Menu dropdown.
Note: For the Custom option you will not get this option, as your custom menu will serve as the mobile menu.
5. From the Menu Type dropdown, select Off Canvas.
Enable the Show Template toggle to use a pattern as the off canvas menu content. Use this when you want to display a custom layout inside the off canvas panel, such as a logo, links, and social icons.
Set the popup width from the Custom Width section. Use this when you need to control how much of the screen the off canvas panel covers.
From the Toggle Style dropdown, select the style for the hamburger or toggle button that opens the menu.
From the Toggle Alignment section, align the toggle button to the left, center, or right of its container.
From the Navigation Alignment section, align the menu items inside the off canvas panel.
Visitors will now see the off canvas menu slide in when they tap the toggle button on mobile.
