Integration is the process of inserting UberMenu within your site layout. There are a variety of ways to do this: Automatic Integration is the easiest way to replace your theme’s menu, as it does not require any code edits. If your theme meets the requirements, this is the best option. Otherwise, you can use Manual Integration. Manual Integration simply requires pasting a line of code generated by UberMenu into the appropriate location in your theme’s template. In most cases, you will also remove or conditionally exclude the theme’s default menu. Manual integration can be used to place a menu anywhere in your theme templates. It is also possible to add UberMenu to your site via Shortcode or Widget You can also add UberMenu via page builders such as the Gutenberg Block Editor, Elementor, Divi, or any page builder that supports adding shortcodes. UberMenu provides a PHP API if you are doing more advanced integration.

Automatic Integration is a feature that allows you to replace a specific menu on your site with UberMenu, provided the theme has been properly coded. Your theme needs to meet the Requirements, otherwise it won’t work – in which case, you can use Manual Integration. If UberMenu does not seem to function properly after activation, your theme likely does not meed the Automatic Integration Requirements, and you’ll need to use Manual Integration instead. In other cases, malfunctions may be do to themes stripping classes or overriding menu arguments How to activate UberMenu To activate UberMenu on a specific menu in your theme: 1. Assign a menu to the Theme Location Navigate to Appearance > Menus > Manage Locations, and assign a menu to the Theme Location you wish to target 2. Activate UberMenu on that Theme Location Navigate to Appearance > UberMenu. In the Main UberMenu Configuration tab (or your desired configuration if you have multiple), click the Integration tab on the left. Under Automatic Integration Theme Location, check the Theme Location you want to turn into an UberMenu. The name of the assigned menu (from step 1) will appear next to the Theme Location for reference Save you settings by clicking the blue Save button in the bottom right. UberMenu will now replace your theme’s menu at the specified Theme Location.

Version 3 is a MAJOR upgrade. Please be sure to test this on a test/staging server before deploying to your live site, and always take a backup before making any changes to a live site. Settings Migration System Please note that by migrating your settings, settings from UberMenu 2 will override any matching settings from UberMenu 3 which you have already configured UberMenu 3 has a system for migrating your UberMenu 2 settings to UberMenu 3. Note that you should have already installed the update by deleting the old UberMenu files and installing the new version. When you first update from UberMenu 2 to UberMenu 3, UberMenu 3 will automatically detect if there are settings to upgrade and present your with this message. Click the Begin Migration button to proceed to the Migration panel. To dismiss the notice, click No, thanks If for some reason the message does not appear but you know there are settings to migrate, or if you change your mind later, the Migration panel can be accessed under General Settings > Maintenance > Migrate Settings. There are two sets of settings to migrate: Control Panel Settings and Menu Item Settings. Generally you don’t need to change anything on this screen, but if you have a lot of menus and only one is an UberMenu, you should uncheck the non-UberMenus to save some processing time. Click the Confirm & Migrate Settings button to complete the settings migration. You will see a confirmation when the process is complete: Integration In order to allow multiple UberMenu instances per page and simpler CSS customization, UberMenu’s CSS selectors have been revised, including a move from an ID root to a class root. As a result, the specificity of the CSS rules is lower in UberMenu 3 than in UberMenu 2. This […]

Overview To manually integrate UberMenu into your theme, you simply copy the generated PHP from the UberMenu Control Panel and paste it into the appropriate template in your theme. This outputs an UberMenu. There are two common use cases for needing manual integration: adding a new menu, or replacing an existing theme menu to eliminate interference from the theme. Adding a new menu If you want to add a menu to your site, where there previously was none, this code can be used to add an UberMenu by placing it in your theme template files. Skip to Generating the UberMenu integration code Replacing an existing menu to avoid residual styling and other interference from your theme Some themes are not coded modularly, and their CSS interferes with the menu functionality because of their imprecision. Manual integration allows us to replace the theme’s navigation system (the entire block of HTML and PHP in the theme that is responsible for the menu), thereby eliminating the interference from the theme, which allows the menu to look and function properly. In this case, we use manual integration to conditionally replace the theme’s menu system, rather than just deleting the offending CSS or classes from the template, in order to preserve the theme’s menu system and make updates and changes easier in the future. For more information on why this happens and why manual integration is the best solution, see residual styling and Theme Interference Note: You should always make changes to your theme in a Child Theme in order to preserve them. The exact location and strategy will depend on your theme Locating the theme template Since every theme is different, the trickiest part of manual integration is figuring out where to paste the integration code. We provide two tools to assist with locating […]

If you would like to add UberMenu to your site as a shortcode, go to Appearance > UberMenu > Main UberMenu Configuration. Click the Integration tab on the left and scroll to Manual Integration. Select the Specific Menu or Specific Theme Location you wish to use as the source of your menu. Copy the generated shortcode Paste the shortcode where you would like the menu to appear.

UberMenu includes a special Widget which can be added to a widget area in your theme. 1. Navigate to Appearance > Widgets. 2. Drag the UberMenu Navigation widget into your desired widget area. 3. You can choose to insert UberMenu one of two ways: By Menu Configuration You can choose a configuration (this will normally just be the “Main” configuration) and a specific Menu (from Appearance > Menus) to display. By Theme Location You can insert the menu for a specific Theme Location into the widget area. The menu assigned to that Theme Location will appear. Normally you would ignore this option, as widget menus tend to be secondary menus without Theme Locations. 4. Save your widget. The menu settings for the widget are controlled through the UberMenu Control panel for that specific instance.

The ubermenu() function The ubermenu() function takes two parameters. $config_id (optional, defaults to ‘main’) The first parameter $config_id, is the ID of the configuration you’re using for this UberMenu. The default configuration is ‘main’. (You can add additional Configurations in the UberMenu Control Panel). The Configuration determines the global properties of the menu, like the skin, transition, trigger, etc. $args (optional) The second parameter, $args, is an array of arguments that will be passed to wp_nav_menu(). While most of these settings will be controlled by UberMenu, this array allows you to specific a specific theme_location or menu when using the API, which will override settings from the Configuration. Examples Display an UberMenu with the main configuration using its default Menu or Display an UberMenu with the main configuration for the menu with slug ‘secondary’ Display an UberMenu with the “custom_blue” configuration for the theme location ‘primary’ Generation Note that you can generate basic API code in the UberMenu Control Panel > {Configuration} > Integration > Manual Integration

UberMenu offers a variety of Advanced Menu Items, available in the Appearance > Menus screen. These items help you create more advanced layouts, with elements like Tabs, Rows, Columns, Widgets, Custom Content, and more. You can add these items to your UberMenu just like normal items. Hover over each item to get a quick description of what it does. Note that you can only use UberMenu Advanced Items in UberMenus, not in other types of menus (in other menus, they will just appear as Custom Links that don’t do anything). Please note that, with the exception of the Custom Content item (and to a certain extent, the Widgets item), these items are intended for use in submenus only, not in the main menu bar (top level items) Advanced Menu Item Types Tabs Dynamic Terms Dynamic Posts Rows Columns Custom Content Menu Segment Widgets

The Tabs item allows you to create a block which contains multiple panels of content; each panel is shown in turn as its related tab is activated. Tabs can only appear in submenus. They cannot be top level menu items Demo Recreation Tutorial This video walks you through recreating the Tabs submenu in the demo. Adding a Tab block In the Appearance > Menus Screen, open the UberMenu Advanced Items section in the left panel. Check the Tabs Block item and click Add to Menu The Tabs Block item does not do anything on its own. To give the block content, add child and grandchild items to the Tabs Item. Child items become the Tab Toggles. Child items of the Tab Toggles appear in the Tab’s Content Panel. In this example, United States, Canada, and Italy become the tab toggles. The Arches Natinal Park, Glacier National Park, and Yosemite National Park items will be displayed in the United States Tab’s Content Panel. This is the result out of the box: You can add an additional level of items to create column content. You can also assign or inherit images images for each item Note that the Submenu settings for the Tab Toggle items will control their respective Content Panels. For example, we can set the default submenu columns to 1/3 for the United States item to evenly distribute the columns: Configuring the Tab Block To change the settings of the Tab Block, click the Uber button on the [UberMenu Tabs Block] item. Tabs Layout The tab toggles can appear to the left, right, top, or bottom of the content panel Left Right Top Note: When you switch to the Top alignment, change your Tabs Toggles Layout Width and Panels Layout Width to Full Width, or leave it set to Automatic […]

A Dynamic Terms menu item will add a group of terms to your menu based on the query settings that you configure. “Terms” are items in a taxonomy. Terms are used to organize your content (posts, pages, custom post types) into different groups. By default your WordPress install has two taxonomies: Categories and Terms, but you can also use Custom Taxonomies. For example, WooCommerce Product Categories are a type of term. Related Video Tutorial: Recreating the Demo’s Dynamic Submenu with Dynamic Posts and Dynamic Terms Adding a Dynamic Terms Item To add a Dynamic Terms item, go to Appearance > Menus and open the UberMenu Advanced Items section at the bottom of the left column. Check the Dynamic Terms item and click the Add to Menu button. Add the item to a submenu (as a child item of another item in the menu – dynamic items cannot be in the top level of the menu). When the menu loads, the Term results will be loaded as menu items in this position in the menu hierarchy. Dynamic Terms Items can only be used in submenus Configuring the Terms Parameters The Dynamic Terms item works by running a search query for Terms in your database based on the parameters you give it. It uses the core WordPress query functionality. To configure the parameters, click the Uber button on the Dynamic Terms menu item. The first tab on the left, Dynamic Terms, offers the parameter configuration settings. Taxonomy The Taxonomy setting determines which taxonomy to return terms from. For example, if you want to display Categories, you would check only the “Categories” item. You can check multiple taxonomies. Any Custom Taxonomies will also appear here. Number The number setting places a limit on the number of results. For example, if you have 20 […]