On phones, a hamburger button that opens the menu keeps the header clean and the links easy to tap.
The free Navigation Menu block in Nexter Blocks turns your menu into a toggle menu on small screens.
For every Navigation Menu setting in one place, see the Navigation Menu block guide.
Before You Start
- Edition: Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.
- Block to enable: Navigation Menu, switched on under Nexter > Blocks in your WordPress dashboard.
- A menu in the block: Manual Menu items, or a WordPress menu with Pro.
Steps
- Add the Navigation Menu block to your header template and set up the menu.
- Open Mobile Menu and turn on Responsive Mobile Menu.
- Set Open Mobile Menu (Screen Width). Below this width the toggle menu is used; the default is 991px.
- Under Mobile Menu, choose Custom to reuse the same menu, or Standard (Pro) and Select Menu for a different WordPress menu.
- Set Menu Type to Toggle, then choose Navigation Width, Toggle Style, Toggle Alignment and Navigation Alignment. Save.
How It Behaves
- Below the chosen width, the desktop menu is hidden and a hamburger button shows.
- Tapping the hamburger slides the menu panel down; tapping it again closes it.
- With Mobile Click Close Menu on, tapping outside the menu also closes it.
- Above the width, the normal desktop menu shows.
Limitations
- In the free plugin, pick Custom. Mobile Menu starts on Standard (Pro), which hides the Menu Type settings.
- Standard (a different WordPress menu for mobile) needs Pro.
Troubleshooting
I do not see Menu Type or Toggle Style
Select Custom under Mobile Menu.
The hamburger shows on tablets and small laptops
Lower Open Mobile Menu (Screen Width), for example to 768.
