Elementor

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 […]

Page Builders

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

Will UberMenu work with my theme?

UberMenu can work with any WordPress theme. UberMenu offers a variety of Integration Options for adding UberMenu to your theme. Different themes may require different integration strategies, and for some themes, a simple PHP edit of the theme’s menu is required to integrate UberMenu. Automatic Integration For most themes, UberMenu can be added via Automatic Integration, which means you just need to check the proper theme location box in the UberMenu settings, and UberMenu will replace that menu. To determine if your theme supports automatic integration, please see the Automatic Integration Requirements Manual Integration However, some themes style and script their built-in menus based on hard-coded menu wrapper classes or IDs. This can result in residual styling which interferes with UberMenu’s functionality. In these cases, you can use Manual Integration to move UberMenu outside of the theme’s menu wrappers, preventing the theme’s code from interfering. Manual integration involves copying a line of PHP into your theme template to replace the theme’s menu. The included Residual Styling Detection / Manual Integration Tool can help you determine where to make the change, if you’re not sure. Builder Integration Generally with Page Builders (WordPress block editor, Elementor, Divi, etc), you’ll want to replace the standard “Menu” block with an UberMenu-specific block. We provide built in blocks for some builders such as the WordPress Block Editor and Elementor. For others (for example, Divi), UberMenu can be integrated by using the UberMenu shortcode in a custom content block. Theme Interference Some themes will interfere with the menu functionality. In the case of residual styling or residual scripting, Manual Integration is generally the solution. In some (rare) cases, a theme will alter the structure or classes of UberMenu via PHP filters. UberMenu has special settings to attempt to combat these scenarios. For more information, see Theme […]

Multiple Instances

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

Integration

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.