Unlike other responsive systems, UberMenu uses a single set of menu items that are displayed at all sizes. Using CSS, the menu format adapts to the various device widths to present a quality navigation experience as the viewport resizes. Breakpoints > 960px Approximate device size: Full Size Monitor or Horizontal Tablet/iPad Target Media Query 767px – 960px Approximate device size: Vertical Tablet/iPad Any menu items that don’t fit on the top level will automatically wrap to a second row. Submenus still accessible as normal. Target Media Query 480px – 767px Approximate device size: Horizontal Phone/iPod Below 767px, the menu collapses to a single bar that can be clicked/tapped to expand the submenu items. Default state Expanded state Top level menu items will be laid out from left to right, top to bottom, with two menu items on each row. Submenu open state Target Media Query < 480px Approximate device size: Vertical Phone/iPod Below 480px, the menu collapses further and top level menu items will each take up an entire row. Default state Expanded state Submenu open state Target Media Query

If you’d rather use a native select box rather than UberMenu for mobile devices, you can install the free Responsive Select Menu plugin, which is compatible with UberMenu.

This article is for UberMenu 2. If you are using UberMenu 3, please check out the UberMenu 3 Knowledgebase: Touch Interface The first thing you need to understand about touch devices (smart phones and tablets), is that there is no true “hover” event, as there is with pointer (mouse-based) devices. A gesture (tap) on the screen must be translated into a hover or click event in the browser. The intent of the user is unknown, so the gesture is somewhat ambiguous. Since on menu items, hover and click have two distinct functionalities (open submenu versus follow link), the OS must use its “best judgment” to approximate click and hover events based on taps. Responsive & Mobile Docs

iOS implements the following logic: Scenario A: For menu items with a hover event (that is, menu items with a submenu) Tap #1 – display submenu. (Mimic Hover Event) Tap #2 – follow link. (Mimic click event) Scenario B: For menu items without a hover event (no submenu) Tap #1 – follow link immediately With the logic of Scenario A, it would not be possible to open submenus by tapping. Hover-out (what the × is for) Since iOS implements the “hover over” event as a tap on a menu item with a submenu, you’d expect it to implement the “hover out” event by tapping anywhere else; however, this is not the case. iOS only triggers the hover-out event when the hover-over event is triggered on a new element. That means that you can’t just tap elsewhere to close the submenu. The solution employed by UberMenu is to add a small × on iOS devices when the submenu is open, which allows the user to close the submenu by clicking it. Otherwise, the submenu would be effectively uncloseable. Once the item has been clicked, however, the link becomes “primed”. That means, the second time you click it, the link will be followed, rather than re-opening the submenu. Therefore, UberMenu provides a new button, ↓, in place of the ×, which allows the user to reopen the submenu by clicking the down arrow, or follow the link by clicking the link text. Disabling the iOS Close button If you’d like to disable the iOS Close button, you can do so in the UberMenu Control Panel under Basic Configuration

Compared to iOS (iPad, iPhone, iPod Touch), Android does things differently. The first tap immediately follows the link, even on menu items with dropdowns. To open a dropdown, it requires a swipe that starts on the menu item and ends off of it. This is best approximated by a downward swipe. Force Click Trigger on Android UberMenu 2.4 As of UberMenu 2.4, the first click on an Android device will open a submenu (if present), and the second click will follow the link, similar to iOS. UberMenu 2.3 and earlier UberMenu implements a “Force Click Trigger on Android” option that makes Android behave more like iOS, which can be enabled or disabled in the control panel. The drawback is that to follow a top-level menu link, you need to hold, then choose “open link”, rather than just tapping.

You may wish to hide certain menu items at different viewport sizes. To do so, you could add some CSS like this and then add the appropriate class to your menu items. The classes defined below are um-below-960 Displays only on viewports < 960px wide um-above-960 Displays only on viewports > 960px wide um-below-767 Displays only on viewports < 767px wide um-above-767 Displays only on viewports > 767px wide um-below-480 Displays only on viewports < 480px wide um-above-480 Displays only on viewports > 480px wide

This article is for UberMenu 2. If you are using UberMenu 3, please check out the UberMenu 3 Knowledgebase: Mobile & Responsive UberMenu implements a single-menu responsive solution. At 767px (the standard breakpoint for mobile devices), the menu collapses into a menu toggle which can be clicked to reveal the menu items. UberMenu remains full-size on larger devices like iPads. UberMenu Responsive & Mobile Contents Read the articles below for information on the standard breakpoints, using UberMenu with Android & iOS, strategies for hiding menu items at different resolutions, and troubleshooting themes with existing responsive menus. Alternatives If you would rather use a separate menu for your mobile menu, there are two options at your disposal: 1. ShiftNav Adds an off-canvas mobile menu on mobile devices, compatible with UberMenu. 2. Responsive Select Menu The Responsive Select Menu plugin offers a different paradigm for handling responsive menu functionality, by collapsing the menu to a selectbox on mobile devices. It is compatible with UberMenu.

If you’d rather replace UberMenu on your mobile device with an off-canvas responsive mobile menu, you can install ShiftNav to do just that.