Widgets

To add a widget to your menu, go to Appearance > Menus and add any menu item. If you wish to add only a Widget and no other content within the item, add a Custom Content item, set the URL to # and the Link Text to a name for your widget item Open the Bellows Menu Item Settings Panel for your widget item, and click on the Widgets tab. Here you can set up a custom widget area for this menu item. Enter a name for your widget area in the Custom Widget Area setting. If you would like to hide the link title, you can check the Disable Link setting under the General tab. Save your menu item settings and the menu (if you have just added a new menu item). After saving the menu item settings, visit your Widgets screen under Appearance > Widgets. You will see a new widget area has been added with the custom widget area name you set. Expand the widget area and drag the widget you’d like to add into that widget area. If you add multiple widgets, they will stack vertically. Your widget will appear on the front end of the site. Note that Bellows does not control the styles of your widget, those are controlled by the widget itself; Bellows just provides the container.

Widgets

Menu Item Settings > Widgets Menu items can contain widget content. Standard menu item or Widget Area item? A standard menu item (like a Post or Page) can have a widget area attached. There is also a Widget Area Advanced Menu Item. If you want a link with a widget area below it, use a standard menu item. If you want a widget area with no link/header, use the Widget Area item. Adding a Widget Area 1. Open the Menu Item Settings > Widgets Go to Appearance > Menus and click the Uber button on the menu item to open the Menu Item Settings Panel. Click the Widgets tab on the left. 2. Assigning a Widget Area To create a widget area specific for this item, just enter a name in the Custom Widget Area setting. When you save your item, a Widget Area with this name will appear in your Widgets screen. To use a reusable widget area for this item, select your desired widget area in the Reusable Widget Area setting. You can register reusable widget areas in the UberMenu Control Panel > General Settings > Widgets 3. Adjust the Layout Adjust the Layout of the item in the Layout tab to set the width of the widget area, if desired. 4. Save your settings Click the Save Menu Item button to save your settings. 5. Assign your widgets Go to Appearance > Widgets and assign your desired widgets to the appropriate UberMenu Widget Areas. Removing Orphaned Widget Areas If you have deleted an item which had a Custom widget area, that widget area will remain. If you’d like to remove it, you can go to the UberMenu Control Panel > General Settings > Maintenance > Manage Widget Areas.

Important Notes on Custom Content (Shortcodes, Widgets)

One of the features that makes UberMenu so flexible is the ability to place widgets and shortcodes inside the menu to generate advanced content. If you are adding a shortcode or widget that has advanced styling, or which has a javascript element, you’ll likely need to tweak a few UberMenu settings to ensure they function properly. Styling Since you’re placing custom content inside the menu, some of the menu styles may apply to your widgets or shortcodes, altering their display. And note that because your widgets/shortcodes are not being placed in a theme sidebar or content area, their styles may not apply when they are in the menu (this depends entirely on how the widget/shortcode was coded. To minimize the effect that UberMenu has on the shortcode/widget styles, you’ll want to disable Reset div and span styling in your UberMenu Control Panel > Theme Integration Scripting Some themes which aren’t coded modularly have javascript that will interfere with UberMenu even after the theme menu is replaced. To combat this, UberMenu has a setting called Remove Theme Conflicts which will attempt to block those scripts. A side effect is that custom javascript that IS supposed to act on the menu may not function. If you know you have javascript that should run in the menu, or you are writing your own javascript to affect the menu, be sure to disable this setting in the UberMenu Control Panel > Theme Integration. A possible result is that you may reintroduce residual scripting from the theme which may need to be addressed so that the menu can function normally.

Top-Level Widgets

Top Level Widgets are widgets attached to top level menu items. And like top level menu items, they are ALWAYS visible. If you want a widget in a submenu, attach it to a second level menu item Note that by default, top-level widgets are deactivated. To activate top-level widgets: Navigate to Appearance > UberMenu Expand Descriptions, Shortcodes, Widgets and activate Allow Top-Level Widgets Save Options Once you have top-level widgets activated, you’ll be able to use widgets in top level menu items as described above.

Widgets

Activate your widget areas, attach them to your menu items, and add widgets to the areas in the normal fashion.

Setup Widgets

UberMenu provides an unlimited number of Widget Areas. To activate widget areas for use, set how many you want to have via Appearance > UberMenu > Descriptions, Shortcodes, Widgets > Number of Sidebars. You can always increase this later. Navigate to Appearance > Widgets and add widgets to the UberMenu Widget Areas Navigate to Appearance > Menus and expand a Menu Item (create it first if you haven’t already), preferably a second-level item (though third-level+ will also work. Note that to use widgets at the top level, you need to activate that via Appearance > UberMenu > Descriptions, Shortcodes, Widgets > Allow Top-Level Widgets – keep in mind that top level widgets will ALWAYS be visible) Click Show/Hide UberMenu Options In the Display a Widget Area select box, select the Widget Area to display in this Menu Item Save the Menu Now UberMenu will load the Widget Area into your Menu. You can update the Widgets in the future without needing to change the Menu again.

How to add a WooCommerce cart widget to your mega menu dropdown

How to add a cart widget to your menu This tutorial shows you how to add a submenu to your Cart Summary / Info item which displays a mini cart. Please note that the styling of your WooCommerce cart widget will be dictated by WooCommerce and your theme (if your theme provides cart widget styles. UberMenu does not apply its own styling to the cart widget 1. Add a Widget Area item as a child of your Cart Summary item In Appearance > Menus, add a new Widget Area item from the UberMenu Advanced Items group. Drag it into position as a child below your top level cart summary item. 2. Set up the Widget Area In your new Widget Area item, open the UberMenu settings and enter the name for your widget area in the Custom Widget Area setting. We’ll use Cart Click Save Menu Item to save the UberMenu item settings. Click Save Menu to save the new menu item to the menu – or you can do this later after you’ve set up the Widget in Step 3. 3. Add the widget Navigate to Appearance > Widgets in your WordPress admin. Find the Cart Widget Drag it into the [UberMenu] Cart widget area You can remove the title to just show the cart with no header above it if you like. Click Save to save the widget. 4. Set the submenu position and width, disable the submenu indicator (optional) Back in Appearance > Menus, Open the UberMenu menu item settings for the top level (Cart summary) item In the General tab, enable the Disable Submenu Indicator setting. In the Submenu tab, set the Mega Submenu Position to Right Edge of Parent Item or as desired. In the Submenu tab, set the Submenu Width to 450px or as […]

How to duplicate / copy an UberMenu

Creating a copy of a menu can be a tedious and error-prone process, so we’ve created a robust and easy-to-use solution that can quickly create exact copies of UberMenu. Check out the Carbon Copy Menu Duplicator plugin. It copies: The menu All menu items All menu item settings All custom menu item styles UberMenu advanced items Menu Segments and mapped menus (recursively) Widgets & custom widget areas The Carbon Copy Menu Duplicator works with any WordPress menu, including other advanced menu solutions such as ShiftNav and Bellows.

Bellows Accordion Menu

If you have Bellows – WordPress Accordion Menu installed on your site, you’ll automatically see an extra option visible when you go to duplicate your menu. By default, the option is checked, but you can disable this if you like. Duplicate Widgets If your source menu items contain any Bellows widget areas, the Duplicator will automatically duplicate these widget areas, as well as the widgets inside them if you enable this option. Custom Menu Item Styles The Duplicator will automatically trigger Bellows to re-generate any custom menu item styles for the duplicated menu – this is important for individual menu item custom styles as the items in the new menus will have new IDs. Please note that any hand-coded custom styles will need to be copied manually and their IDs updated. (A better solution may be to use custom CSS classes that you can then re-use across menus and maintain just a single style).

UberMenu Mega Menu

If you have UberMenu – WordPress Mega Menu installed on your site, you’ll automatically see some extra options visible when you go to duplicate your menu. By default, both are checked, but you can disable these if you like. Duplicate Menu Segments If your source menu contains UberMenu Menu Segments, the Duplicator will automatically recursively duplicate all segments, and link all the copied menus up properly when you duplicate them if you enable this option. Duplicate Widgets If your source menu items contain any UberMenu widget areas, the Duplicator will automatically duplicate these widget areas, as well as the widgets inside them if you enable this option. Custom Menu Item Styles The Duplicator will automatically trigger UberMenu to re-generate any custom menu item styles for the duplicated menu – this is important for individual menu item custom styles as the items in the new menus will have new IDs. Please note that any hand-coded custom styles will need to be copied manually and their IDs updated. (A better solution may be to use custom CSS classes that you can then re-use across menus and maintain just a single style).