How to Setup Mobile Menus
The mobile-friendly, responsive nature of Layers means your main navigation menus will convert into a mobile toggle by default when a screen size below 768px wide is detected. This means your main menus disappear, so you need to ensure sufficient navigation is available in the mobile sidebar. The Custom Menu widget allows you to select a special mobile menu, or you can use your existing header menu.
Create a Mobile Menu
These steps are optional – you can use an existing menu in your mobile sidebar if desired
- Go to → and click create new menu
- Give your menu a name and click Create Menu
- Add your desired links. Since this is a mobile nav, keep it as short as possible and link to main pages only and don’t create sub-menus.
- See Setup Your Menus for a detailed overview of creating menus in WordPress
- In the Menu Settings section below your link panels, make sure none of the boxes are checked.
- Click Save Menu
Setup the Sidebar
- Click on →
- Click Edit Layout
- Expand the Mobile Sidebar
- Click Add Widget and choose the Custom Menu Widget
- Select your desired menu from the drop-down and click Save Changes at the top
You may add other sidebar widgets to this panel if you wish. While the sidebar will scroll, we recommend limiting the widgets to a few small ones or whatever will fit comfortably in 480 pixels tall. Do not use Layers builder widgets in this panel.
To view the mobile version of your site, you can load your URL in an online tool such as responsinator.com.
See How to Test Mobile or Responsive Views of your Site
Show Toggle on All Screen Sizes
Did you know?
Our friends at Jetpack are doing some incredible work to improve the WordPress experience. Check out Jetpack and improve your site's security, speed and reliability.
