Mobile Menus

You have three options when choosing a mobile/small screen menu layout for your Quickstart site.
Depending on the amount of navigation items you choose to put in your main menu, you may find the need to change how your main menu is rendered.

Option 1: Overlay Scroll menu Default

What it looks like

Below is a screenshot of how the overlay scroll menu will appear on small screens and mobile devices.  When you click the menu button the menu takes up the whole screen on mobile, or any screen smaller than 991px wide.

How to set it up

Choose your menu configuration in Administration > Appearance > Settings > UA Zen

Admin Path: /admin/appearance/settings/ua_zen

You must select: Render the main menu element using UA Bootstrap's Dropdown Navbar component, AND Overlay Menu Scroll from the Menu Style Enhancements fieldset.

These settings are already configured for you by default with Quickstart.

Option 2: Superfish

What it looks like

Below is a screenshot of how the superfish menu will appear on small screens and mobile devices.  When you click the menu button the menu expands to show the menu links.

How to set it up

Choose your menu configuration in Administration > Appearance > Settings > UA Zen

Admin Path: /admin/appearance/settings/ua_zen

You must select: Render the main menu element using Superfish (requires UAQS Navigation & Superfish modules).

Option 3: UA Bootstrap

What it looks like

Below is a screenshot of how the ua-bootstrap menu will appear on small screens and mobile devices.  When you click the menu button the menu expands to show the menu links.

How to set it up

Choose your menu configuration in Administration > Appearance > Settings > UA Zen

Admin Path: /admin/appearance/settings/ua_zen

You must select: Render the main menu element using UA Bootstrap's Dropdown Navbar component. Leave Overlay Menu Scroll from the Menu Style Enhancements fieldset unchecked.