Menu Item Settings > Responsive

If you have menu items that should only be displayed on mobile (or only on desktop), there are two ways to accomplish that through the UberMenu Menu Item Settings, under the Responsive Tab.

Hiding a menu item

Hiding a menu item means that it will be hidden from view with CSS, but it will still be present in the markup. Whether the item is hidden or not depends on the viewport width.

The advantage to hiding over disabling, is that the menu items will appear and disappear as users resize their viewports or rotate devices. The disadvantage is that the markup will always be present, and therefore that data will still be transferred to mobile users.

Disabling a menu item

Disabling a menu item means that the item will not be present in the markup at all. Whether the item is disabled or not depends on the type of device (determined with wp_is_mobile() ).

The advantage of disabling over hiding is that it will save your mobile users some bandwidth. The disadvantage is that if you are using caching and you don’t have a separate cache for mobile and desktop users, you cache can serve up the wrong version of the menu. Also, the wp_is_mobile() function uses server-side browser detection to determine whether a user is on a mobile device or not, which is not 100% reliable.

Disabling a submenu

If you would like to disable an entire submenu, you can do that as well. Note that the same disadvantages/warnings apply as with disabling a menu item. If you check “Disable submenu on mobile” on a specific item, it will disable that item’s submenu.

Note that you can’t simply hide a submenu below a breakpoint with CSS. If you did, the submenu would still be present in the markup, so the menu would try to open it (naturally, since the submenus are hidden in their default state under normal circumstances). This settings actually removes the submenu markup altogether on mobile devices, so the menu acts as though there are no submenus there (which there aren’t).