Overview To build a multi-level mega menu structure of automatically generated terms, you can “nest” the [Dynamic Terms] items – that is, create multiple levels of parent/child relationships where the items inherit from one another. This tutorial walks you through setting up a menu with two submenu levels that automatically mirror a taxonomy structure. We’ll use this menu structure: To create this display: The parent [Dynamic Terms] item creates the second level column headers (Tops, Bottoms, Footwear, Accessories), while the child [Dynamic Terms] item creates the content below each header. Key Concepts 1. One level per [Dynamic Terms] item First, it’s important to understand that each [Dynamic Terms] item creates one level in the menu structure hierarchy. You can think of this as the results of the [Dynamic Terms] query expanding to replace that item in your menu structure. In other words, this structure: – Top Level — [Dynamic Terms] will generate this: – Top Level — Term A — Term B — Term C It will *not* generate a third level, even if your Terms query returns multiple levels of terms items. To do that, we would use nesting: – Top Level — [Dynamic Terms] (set parent term) — [Dynamic Terms] (inherit parent term) which will generate this when properly configured: – Top Level — Term A — Term A1 — Term A2 — Term B — Term B1 — Term B2 — Term C — Term C1 — Term C2 2. To filter the Terms results to a single level, use the Parent Term setting The Parent Term setting allows you to filter the [Dynamic Terms] results to children of a single term. Note: to show all top level terms, select [Top Level Terms Only], or set the ID to 0. 3. The Parent Term setting can be […]

UberMenu Control Panel > General Settings > Accessibility UberMenu provides the following accessibility features, which can be enabled and disabled to your liking in the settings Keyboard accessibility Allows users to tab through the menu and highlight focused elements. For more information, see Keyboard Accessibility & the Blue Outline / Glow Keyboard Submenu Control Since UberMenu v3.8 Controls how the submenus are activated when tabbing through the menu items with the keyboard. Enter Enter/Return – Open the submenu if one exists. If not, follow the link. Once the submenu is open, a second stroke of the Enter/Return key will follow the link. Tab – Enter the submenu if it is open, otherwise navigate to the next visible item Escape – Close the submenu if it is open Spacebar Spacebar – Open the submenu if one exists Enter/Return – Follow the link of the highlighted item Tab – Enter the submenu if it is open, otherwise navigate to the next visible item Escape – Close the submenu if it is open Focus Tab – Focuses the top level item and opens its submenu Enter/Return – Follows the link Escape – Close the submenu if it is open. Skip navigation link Adds a hidden skip nav link to assist those using screen readers Collapse mobile menu with Escape key On mobile, the menu is closed when the escape key is pressed. tabindex Top level anchors will be given a tabindex of 0. (Note that there is no setting associated with this attribute, it will be added automatically) ARIA Settings for Accessible Rich Internet Applications role=”navigation” Adds role attribute to the nav container (redundant if using HTML 5 nav tag) aria-label for nav Adds aria-label=”{menu-title}” to the nav tag. You can set the title of your menu in the Appearance > Menus screen […]

The Twenty Twenty theme’s CSS will interfere with UberMenu when using Automatic Integration due to the theme’s hard-coded nav and ul containers. Complete the following steps to manually integrate with Twenty Twenty and eliminate the interference from the theme. Desktop Manual Integration 1. Set up a child theme If you haven’t already, remember to install and activate a child theme to contain your changes and preserve them when you update the parent theme. 2. Copy the header.php Copy the header.php file from the parent theme into the main directory of the child theme. This is where we will make the code changes. 3. Replace the theme’s menu with UberMenu In the child theme’s header.php, find the .header-navigation-wrapper div. Inside this div you will see a check for has_nav_menu( ‘primary’ ). We will replace this entire section (the nav.primary-menu-wrapper) conditionally with UberMenu. These are lines 84 – 122 in version 1.2. Before: after: That’s it for the desktop. This will eliminate residual styling coming from the .primary-menu and .primary-menu-wrapper. Please see the Recommended Settings at the end for suggestions on how to configure the plugin with this theme. Mobile Menu Options Twenty Twenty uses an entirely separate menu on mobile, so it requires a separate integration. Note that the theme hides the desktop menu, where we integrated UberMenu above, on mobile. Option 1: Using the theme menu on mobile If you want to use the theme menu on mobile, you can just assign a menu to the Mobile Menu theme location in Appearance > Menus > Manage Locations. (Note that if you do not assign a menu to the mobile theme location, it’ll fall back to the Primary theme location, so if you’re doing things that way, make sure you have not activated UberMenu on the Primary theme location). Do *not* […]

Supported since UberMenu v3.6 Please note this feature requires the use of PHP 7.0 or later. How to add UberMenu to an Elementor Layout 1. Open your Elementor template in the Elementor editor Generally this would be a header template 2. Add the UberMenu widget to the layout Find the UberMenu widget under the “General” section or search for it Choose the “UberMenu Mega Menu” option, not the “UberMenu Navigation” WordPress widget Drag it into your layout 3. Assign the menu Once you drop the widget into the layout, you’ll need to set the menu and configuration you want to use Assign The assign setting determines which method you’ll use to assign the menu – “Menu” or “Theme Location”. In most cases you will use “Menu”, which will allow you to select your desired menu directly. Assign: Menu If you select the “Menu” assignment, you’ll see a “Menu” option appear with a list of menus you’ve created (if you have not created a menu already, go to Appearance > Menus to do so). Select the menu you want to display The selected menu will be displayed in your layout Assign: Theme Location If you choose to assign the menu by theme location, you’ll see the “Theme Location” option appear, showing a list of all registered theme locations. Note: your theme may not register a theme location, in which case there will be no options here. Select the theme location to use. If there is no menu assigned to the theme location, you’ll see a notice like this: Click “assign a menu” to go to your Appearance > Menus > Manage Locations screen to assign a menu to your chosen theme location. Then the menu will appear in your layout Select the Configuration Finally, you can choose the Configuration to use […]

To use UberMenu within a page builder layout, you can paste the UberMenu Shortcode inside a page builder block that supports shortcode processing. Various page builders call these blocks “custom content”, “HTML”, “Text”, “Shortcode”, etc. Please refer to your page builder’s documentation for the appropriate block type to handle shortcodes. Do not use the builder’s “Menu” or “Nav” block type. These blocks are generally specifically for the builder’s built-in navigation and will interfere with UberMenu. Page builder support You can use UberMenu with any page builder that has a custom block that supports shortcodes, but we have guides for the following, with native support noted: Elementor Native support since UberMenu v3.6 How to add UberMenu to an Elementor layout Divi Build your header with the Divi Header Builder Gutenberg (WordPress standard block editor) Native support since UberMenu v3.5 Add UberMenu to the WordPress Block Editor / Gutenberg

The Oshine theme’s menu styles interfere with UberMenu. You’ll also get two menus visible out of the box, as the theme uses two separate menus for desktop and mobile, so UberMenu replaces both if you automatically integrate. We’ll use manual integration to replace the theme’s dual-menu system with a single menu and eliminate the interference from the theme. We’ll assume you’re using Oshine’s “Top Header” in this tutorial, as that is the layout that makes sense for a mega menu. Manual Integration 1. Install and activate the child theme Oshine comes with a starter child theme. We’ll be making the changes in this theme so that they don’t get overridden next time the theme is updated. If you haven’t already, install the child theme that comes with Oshine. The Oshine Child theme is included in the full download package from ThemeForest 2. Copy the header template into the child theme First, you need to determine the proper template to copy over based on the Top Header Style you’ve selected in your settings. The theme’s menu code that we need to replace is found in the theme template headers/top/header-style{x}.php Where {x} depends on the Top Header Style setting. Unfortunately there’s not a 1:1 mapping here, but based on the theme’s logic: header-style.php is used for Styles 1, 3, 4, and 5 header-style{x}.php, where {x} is the style number, is used for Styles 2, 6, and 13 (e.g. header-style6.php header-new-style.php is used for all other styles Pick the template relevant to your Top Header Style Create the same directory structure in the child theme (header/top/) and copy the template into the child theme’s folder so you end up with oshin_child/headers/top/header-style.php 3. Edit the header template to replace the theme’s menu with UberMenu Open the new file that you just copied into the […]

Twenty Nineteen interferes with UberMenu in two ways: 1. Injecting markup through PHP filters, which is resolved through a snippet of code provided below. 2. Residual styling, which is resolved through manual integration and a line of CSS. Are you using a child theme? You should always use a child theme to modify your theme and never edit the parent theme itself. If you’re not already using a child theme, create one first and activate it. If you’re not sure how to create a child theme, you can use the Child Theme Configurator plugin to automate the task. Don’t forget to activate your child theme. It doesn’t do anything unless it’s the active theme. Removing extra Twenty Nineteen markup The most obvious issue when integrating UberMenu with Twenty Nineteen is the extra markup that the theme injects, so we’ll tackle that first. All of these extra arrows (among other markup) are added by Twenty Nineteen. While these are important for Twenty Nineteen’s menu, the theme adds this extra markup to *all* menus, rather than just its own. To prevent Twenty Nineteen from adding this extra markup to UberMenu, add this PHP code in your child theme’s functions.php Eliminating Residual Styling Next we want to prevent the theme’s styles from interfering with the menu. To do this we’ll use manual integration. First, copy the twentynineteen/template-parts/header/site-branding.php into your child theme in the same directory (you’ll need to create those directories if they don’t already exist). e.g. twentynineteenchild/template-parts/header/site-branding.php Next, open the child theme’s site-branding.php file and find the #site-navigation section: Replace this block of code: with this: That manually integrates the menu. Finally, there is still some CSS from the theme that gives the text in the menu a shadow – it applies to all text within the header. To disable this, add […]

Since UberMenu v3.5 How to add a WooCommerce cart summary item to your menu 1. Allow shortcodes in your menu item Navigation Labels We’re going to create a menu item with a dynamic navigation label, the content of which will change depending on the contents of your cart, using a shortcode. Therefore we need to tell UberMenu to allow shortcodes by going to Appearance > UberMenu > Main Configuration > Miscellaneous and enabling the Allow shortcodes in Navigation Label & Description setting. 2. Add a menu item linking to your cart In Appearance > Menus, add the Cart page to your menu. 3. Display the cart summary using the provided shortcode Example A – Cart Count Badge Requires v3.7+ Open the UberMenu Item settings for the Cart item. In the General tab, enable Disable Text In the Badge tab, add the shortcode to the Badge Content setting [ubermenu_woocommerce_cart_info show_count_label=”off” total=”off”] You can also set your badge background and text color in these settings. Example B – Full Summary in Navigation Label Open the newly added menu item, and edit the Navigation Label to add the shortcode: [ubermenu_woocommerce_cart_info] See below for more ways to configure this shortcode to display only the content you want. 4. Set the cart icon To make the cart icon appear beside the cart summary info, set the icon in the UberMenu menu item settings 5. Align your item to the right (optional) If you would like to align your cart summary to the right, set the Alignment menu item setting to Right 6. Save your work Save the menu item settings, then save your menu if you haven’t already. View the front end of your site and you should see the cart summary appear on the right edge of the menu WooCommerce Cart Info Shortcode [ubermenu_woocommerce_cart_info] […]

To eliminate the residual styling caused by Twenty Seventeen, we’ll do a simple manual integration. 1. Create a child theme If you haven’t already, create a child theme. Make all your edits in the child theme so that they don’t get overwritten when you update Twenty Seventeen. 2. Copy your header.php into the child theme Take Twenty Seventeen’s header.php and copy it into the child theme’s folder. 3. Manually integrate In the child theme header.php, find the menu code: Specifically, find this line: We will replace it with UberMenu, conditionally: Now UberMenu is integrated and can be used without interference from the theme.