If you want to add a significant amount of custom CSS, the best method is to use a custom stylesheet. You can always add the CSS to your child theme’s style.css, but if you want to keep your UberMenu styles separate, you can use the UberMenu custom.css 1. Activate the custom stylesheet In the UberMenu Control Panel, go to General Settings > Assets and activate the Load Custom Stylesheet settings. This will load the custom/custom.css file after the UberMenu core and skin files, but before the Custom Tweaks from the settings. 2.Create the custom stylesheet In the plugins/ubermenu/custom directory, create a custom.css file (you can rename custom-sample.css). 3. Adding supplementary styles If you would like to add additional styles to customize an existing skin, just start adding your custom CSS to the file. 4. Creating a complete custom skin If you want to create a completely customized skin, you will likely want to disable the existing skin in the UberMenu Control Panel Main UberMenu Configuration > Basic Configuration by setting the Skin to None (Disable) If you would like a sample skin to begin working with, copy the custom-sample-skin.css file into your custom.css. You can also check out this online version of the UberMenu custom-sample-skin.css, which includes comments labelling each style for easy reference. Have fun customizing!

Item Settings > Customize Style Each menu item can be styled individually as well. UberMenu provides a few common style settings for each menu item, which can be found in the item settings. In the Appearance > Menus panel, open the item settings for your desired item and click the Customize Style tab. Tweak the settings as you like and save your changes to apply them to your menu. Settings include: Background Color Font Color Background Color [Active] Font Color [Active] Background Color [Current] Font Color [Current] Padding Submenu Background Color Submenu Font Color

UberMenu detects devices which support touch interactions and loads a touch-specific interface using javascript touch events. Understanding Touch Interfaces On a machine with a mouse (a pointer), there are two interactions that can occur: hover and click. The standard navigation menu paradigm is that when a user hovers over a menu item, its submenu is displayed; when the user clicks, the link is followed. On a mobile device with a touch interface, there is only one interaction – a touch/tap. When the user taps on a menu item, it is ambiguous whether the user intended to follow the link, or open the submenu. Therefore these actions are executed on sequential taps. In short: 1. The first touch will open the submenu 2. The second touch will follow the link Of course, it is a bit more complex than that based on the scenario. It can be summed up with these rules: If the menu item does not have a submenu, follow the link If the menu item has a submenu, and the submenu is closed, open the submenu If the menu item has a submenu, and the submenu is open, follow the link If the menu item has a submenu, and the submenu is open, but the item is not a link, close the submenu (Note that the submenu can be closed with the Submenu Close Buttons) The touch interface logic is displayed in this flowchart:

Unlike dual-menu 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 480px – 959px Approximate device size: Vertical iPad, Horizontal Phone/iPod Below 960px, 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

UberMenu Control Panel > Main UberMenu Configuration > Responsive & Mobile Below the responsive breakpoint (960px by default, configurable in the Control Panel), UberMenu collapses and is replaced by a responsive toggle button. “Responsive Toggle” Setting Out of the box, UberMenu will automatically inject the Responsive Toggle button directly above the menu markup in your layout. If you’d rather it appear elsewhere, you can disable the “Responsive Toggle” setting, and then use one of the methods described under “Custom Toggles” below to place the toggle wherever you like within your layout. Responsive Toggle Content By default, the toggle button will display the text “Menu”. You can change this to whatever you like in the Responsive & Mobile settings. Responsive Toggle Placement Switch your toggle’s location in the layout from “Inline” (wherever the menu itself is integrated in the layout) to “Fixed”, where the toggle will be injected into the footer and then set in a fixed position in the upper right of the screen. You can control the positioning by tweaking this custom CSS if desired: Custom Toggles The default toggle button is added to your layout just before the menu itself by default when you integrate UberMenu, but if you prefer you can disable the default toggle and add your own elsewhere. Disable the Responsive Toggle setting and add your toggle via PHP or shortcode. Keep in mind that if you add a custom toggle, you’ll control it via the function you use and custom styling. Shortcode Base shortcode Here’s the basic shortcode, that will toggle *all* menus Control a specific menu (Recommended) To control a specific menu, set the config_id and target attributes Keep in mind that the ID is generated dynamically, depending on your setup, and will be in a format such as ubermenu-{config_id}-{menu_id}-{theme_location_slug}-{instance} to guarantee ID […]

ShiftNav is an off-canvas mobile menu plugin that you can use in place of UberMenu on mobile sites if you prefer this type of menu.

For maximum flexibility, layouts are built compartmentally. If you would like to build a defined layout, you’ll want to become familiar with The Grid. Don’t forget to check out the Visual Grid System Demo To lay out your items within the submenu, check out Mega Submenu Layouts and the corresponding Visual Submenu Layout Demo To configure the arrangement of the elements within a menu item, and that item within the submenu, check out the Menu Item Layouts article and the corresponding Visual Item Layout Demo

Appearance > Menus Content is added to UberMenu through the standard WordPress Appearance > Menus screen. WordPress Codex: Adding Menu Items Creating a menu If you haven’t created a menu already, do so by giving your menu a title and clicking Create Menu Adding Menu Items To add content to your menu, use the lists of available menu items in the left column. The content on your site is organized into sections based on the content type – Posts, Pages, Custom Post Types, and Taxonomies (tags, categories, and custom taxonomies). Check the items you want to add, then click Add to Menu Please note that the menu items available to you are based on the content present on your site, so what you see on your site will be different from the menu items available in the demo tutorials, for example, which include custom post types which your site will not include by default. To reveal additional menu item types, click the Screen Options tab in the upper right of your Menus panel. To reorganize your menu items, drag and drop them into the order you want. You can assign this menu to a specific theme location (just as in the Manage Locations tab) by checking the appropriate theme location in the box below the menu items. To save your menu structure, click the Save Menu button. Adding Submenus A submenu is created any time a menu item has a child item. To assign a child item, add a menu item to your menu, then drag that menu item so that it is indented below its parent item. A submenu will automatically be generated to contain all child items of a menu item. Organize your menu into a hierarchical structure which will be transformed into a navigation menu layout. UberMenu […]

UberMenu 3 allows you to have multiple, independent instances of UberMenu on your site and on individual pages. If all of your menus will have the same Configuration (style, positioning, trigger, etc), you can create Multiple Instances using the same Configuration with different menus. If you have menus which need to have different attributes (style, skin, orientation, position, etc), you can create Multiple Configurations in the Control Panel, which you can assign to your various menu instances. If you need to add a new menu that does not already exist in your theme, you can add a new menu via PHP, Shortcode, or Widget

If you want multiple UberMenus on your site which are all configured the same (apart from the menu contents), you can achieve that in a few ways: Multiple Theme Location Activation If you have multiple menus that already exist on your site, you can activate UberMenu on each of them (assuming the theme supports automatic integration). Just check each theme location you wish to activate. Via a Builder You can add multiple UberMenu instances via a Page Builder such as Elementor, Divi, Oxygen, etc. Add a menu via PHP If you’d like to add a new menu to your theme, you can insert the PHP generated by UberMenu into your theme template. Choose a specific menu or a theme location to generate the appropriate code. More information: Manual Integration Add a menu via Shortcode Use the same Manual Integration method to generate a shortcode which can be placed in your site content. More information: Shortcodes Add a menu via Widgets Drag the UberMenu Navigation widget into the appropriate widget area to add an UberMenu to your site. Set the Menu (optional) parameter to configure which menu to display. More information: Widget