A Dynamic Posts menu item will add a group of post items to your menu based on the query settings that you configure. “Posts” are any public post type on your site. They represent discrete pieces of content on your site. By default your WordPress install has two public post types: Posts and Pages, but you can also use Custom Post Types. For example, WooCommerce Products are a type of post. Related Video Tutorial: Recreating the Demo’s Dynamic Submenu with Dynamic Posts and Dynamic Terms Adding a Dynamic Posts Item To add a Dynamic Posts item, go to Appearance > Menus and open the UberMenu Advanced Items section at the bottom of the left column. Check the Dynamic Posts 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 Post results will be loaded as menu items in this position in the menu hierarchy. Dynamic Posts Items can only be used in submenus Configuring the Post Query Parameters The Dynamic Posts item works by running a search query for posts 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 Posts menu item. The first tab on the left, Dynamic Posts, offers the parameter configuration settings. Limit The limit setting places a limit on the number of results. For example, if you have 20 posts that match your parameters and you set this to 5, only 5 Posts will be displayed. Set to -1 to display all matching posts. Post Type The Post Type setting determines which post types to return […]

The main purpose of the Row item is to be able to center your submenu content within a wider submenu panel. For example, if you are using unbounded submenus which expand to the extents of your viewport, but you want the content to be centered within a 960px area, you would wrap your submenu content in a Row item. You can set the width of the row container in the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout > Submenus > Submenu Row Width Control Panel – Row Width Setting Centered submenu content on front end Using Rows in the Appearance > Menus panel Add a row as a child of your top level items and parent of the submenu content that should appear within the row to center that content. [Row] items can also be used to separate submenu content into different rows, as an alternative to the “New Row” option. Note that a Row item is not required to start a new row, however, so this item should only be used when necessary.

Every menu item can create a visual column. This special Column menu item is for wrapping multiple menu items within a single column, which provides more control over your layouts. Think of it as a container in which to place additional menu item content. You would not need a Column item if the content of that column is a single item. Please note: Column items do not produce any content of their own, they are purely a layout utility: a wrapper for the grid. To create a column with a header that isn’t a link, just add a “Link” item, set its URL to #, and check the “Disable Link” setting By default, children of a Column item will be displayed as Normal items. If you want to display an item as a Column Header instead, you can change the Item Display setting in the Menu Item Settings for that item Adding a Column in the Menus panel How to add multiple headers in a single column video tutorial Example Layout Here’s an example layout, where a column is used to wrap the “Books”, “Movies”, and “Music” items in order to stack them in a single column. Front end layout Front end layout – diagrammed Back end menu structure to produce the above layout

Appearance > Menus > UberMenu Advanced Items You can add a block of custom content to any normal menu item – however, if you don’t need a Link as part of your item, it is easier to just use this Custom item than to create a Link and set the URL to #, disable the link, etc. The layout and positioning of the custom item can be controlled just like any other menu item – its content is simply controlled through the Menu Item Settings

Appearance > Menus > UberMenu Advanced Items Menu segments allow you to inject items from a separate menu into the current menu. A menu segment item will be replaced by the menu items of the segment assigned to it. Please note that menu segments should not be used as direct children of Tabs advanced menu items. Example: you have two menus, “My Main Menu” and “My Menu Segment”: My Main Menu: The Menu Segment menu item is set to My Menu Segment My Menu Segment Effective Menu When the menu is generated, the menu items from My Menu Segment will replace the Menu Segment item in My Main Menu, effectively producing: (Note this is just for illustrative purposes; the items in your Menus panel won’t actually change) Result Menu Segment Caching As of UberMenu 3.2.1, you can cache menu segments just by checking a box. This saves you any processing that would occur within that menu segment. Read more about Menu Segment Caching

NEVER edit UberMenu’s core files. Follow the best practices outlined here to customize UberMenu in a way that will be preserved when you update You can customize UberMenu at a variety of levels. Customizer The Customizer allows you to tweak a variety of global menu settings with a live preview. Menu Item Custom Styles To customize a specific menu item, you can use the Customize Style tab in the Menu Item Settings. CSS Tweaks For minor custom CSS tweaks, you can add them via the UberMenu Control Panel. There is a setting for global, desktop, and mobile sizes. Custom CSS Stylesheet For more significant custom CSS, you can use a custom stylesheet. Advanced Developers looking to do more advanced customizations can check out the PHP API, Filters, Javascript API, Custom Item Layout system and more.

UberMenu implements a single-menu responsive solution. Below 960px, the menu collapses into a menu toggle which can be clicked to reveal the menu items. UberMenu remains full-size on larger devices like horizontally-oriented iPads. UberMenu Responsive & Mobile Articles Read the articles below for information on the default breakpoints, using UberMenu on mobile, strategies for hiding menu items at different resolutions, and troubleshooting themes with existing responsive menus. Alternatives If you would rather use a separate menu for your mobile menu, we provide a dedicated mobile menu option called ShiftNav. ShiftNav Adds an off-canvas mobile menu on mobile devices, compatible with UberMenu.

UberMenu is built to be as efficient as possible, but once you are done designing your menu, you can optimize it even further. Image Optimization If you’ve added images to your menu, this means you’re loading extra resources on your site that you wouldn’t be otherwise without UberMenu. Make sure you are loading those resources as efficiently as possible by choosing an appropriate Image Size in the Control Panel. You can also use lazy loading for submenu images (which you can enable in the Control Panel). Learn more about Image Optimization CSS & JS Optimization Whether it’s UberMenu or any other module on your site, you’ll want to optimize your code when you move to production to get the fastest load times by minimizing bandwidth and HTTP server requests. Learn more about Asset Optimization Database Query and Processing Optimization Whether you are using UberMenu or a standard WordPress menu, building a menu requires multiple database queries on each page load. Of course, the more menu items and queries you require of the menu, the longer it will take to assemble that information and load the menu. When designing your menu, you should make sure to use your resources efficiently (for example, don’t use Dynamic items unnecessarily). Using caching to minimize your database queries can make your site run faster and decrease server load. Using a full featured caching solution like W3 Total Cache is a great way to speed things up. Leveraging Menu Segment Caching is a great way to cache your submenus independently and save processing on each page load. If you have a lot of logged in users, the WP Menu Cache plugin allows you to cache just the menu itself. Remember, don’t keep caching plugins enabled during the development process, as they’ll prevent any changes you make […]

UberMenu 3 offers a variety of features for developers, including a PHP API, Javascript API, and LESS skin files.

The javascript API allows you to interact with the menu via custom javascript. The Functions API allows you to perform actions on the menu. The Events API allows you to trigger actions when menu events occur. It’s up to you where you place your custom javascript, but you can make use of the custom.js if you like. Please note that, depending on the order in which you enqueue your scripts, you may need to disable UberMenu’s Remove JS Conflicts setting in the UberMenu Control Panel > General > Script Configuration