How to Setup Mobile Menus

How To  Layers User Guide  Last Updated: Time to Read: 1 minute

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.

These steps are optional – you can use an existing menu in your mobile sidebar if desired

  1. Go to Appearance → Menus and click create new menu
  2. Give your menu a name and click Create Menu
  3. 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.
  4. In the Menu Settings section below your link panels, make sure none of the boxes are checked.
  5. Click Save Menu
  1. Click on Layers Customize
  2. Click Edit Layout
  3. Expand the Mobile Sidebar
  4. Click Add Widget and choose the Custom Menu Widget
  5. Select your desired menu from the drop-down and click Save Changes at the top

mobile-sidebar

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

How to Enable Mobile Sidebar Toggle on All Screen Sizes