WordPress Requirements

1. WordPress 3.6+
2. Use of the WordPress 3 Menu System
   This can be accessed through the Control Panel of any WordPress 3 install via Appearance > Menus
3. A WordPress 3 Menu System-Compatible Theme
   The WordPress theme you use must properly implement WordPress 3 Navigation Menus. That means using the standard wp_nav_menu() with a registered theme_location.

See also Theme Compatibility

Theme Compatibility

Your theme must properly implement the WordPress 3 Custom Menu System in order to support WordPress out of the box (note that you can still use UberMenu without a properly supported theme, but you’ll need to add some PHP). To check if your theme supports WP3 Menus:

1. Log into the WordPress Admin area.
2. Navigate to Appearance > Menus. If this option is not available, WP3 Menus are not supported.
3. In the Menus panel, check to see if you have the Manage Locations tab. It will tell you if your theme supports WP3 Menus.

Theme registers theme locations: Compatible

If your Menus Panel has the Manage Locations tab and says Your theme supports x menus (where x > 0), the theme is compatible.

Any theme location listed can be turned into an UberMenu if the theme is coded properly.

Theme does NOT register theme locations: Requires Easy Integration (can’t auto-replace menu)

If the theme says Your theme does not natively support menus, then you will need to insert Easy Integration into your theme template to integrate UberMenu, since this theme does not meet the Requirements for automatic menu replacement.

Note: Please check if your theme has Specific Integration Instructions

In WordPress 3.6, the theme locations management has moved to Appearance > Menus > ManageLocations

WordPress 3.5 and earlier

Theme Supports WordPress 3 Menus ↓	Theme Does NOT Support WordPress 3 Menus ↓
Appearance > Menus > Theme Locations: Your theme supports 1 menu. Select which menu you would like to use.	Appearance > Menus > Theme Locations: Your theme supports 0 menus.
WordPress 3.5	WordPress 3.5
UberMenu can apply to this menu automatically	UberMenu can’t automatically apply. You need UberMenu Easy Integration

Known Exceptions:

• Artisteer does not call wp_nav_menu
  , so it does not support UberMenu out of the box. You’ll need to use UberMenu Easy Integration with Artisteer.
• Headway 3.x now uses WordPress 3 Menus, but to remove the residual styling you’ll want to use these special instructions.
• Suffusion implements a non-standard menu. However, at the last version I tested, the menu can be easily replaced with UberMenu via these integration instructions. I do not recommend use with this theme unless you are comfortable adding a small amount of PHP code to your functions.php.
• Gantry Framework. Gantry does not use wp_nav_menu, so you’d need to use UberMenu Easy Integration in a widget. However, note that Gantry adds its own code to the WordPress widget/sidebar system, which seems to cause issues when adding widgets to your menu. Therefore I would not recommend using UberMenu with Gantry at this time. If you want to try this on your own, please see the Gantry-specific instructions
• MultiToool Framework The MultiToool framewok does not use theme locations, and does not provide a way to easily include UberMenu Easy Integration. I have not found a good way to integrate UberMenu with this framework.

Install the Plugin

There are two ways to install the plugin.

Option 1: WordPress Plugin Uploader

You can install UberMenu via the WordPress plugin uploader without unzipping the file.

1. Log into your WordPress admin panel
2. Navigate to Plugins > Add New
3. Click Upload
   
4. Click Choose File and select the UberMenu plugin package zip.
5. Click Install Now.
6. Complete the installation process as directed by WordPress.

Option 2: FTP

You can also install UberMenu via FTP

1. Decompress the .zip file you downloaded from CodeCanyon.
2. Find the ubermenu folder (this directory is created when you unzip the file).
3. Upload the ubermenu folder to your wp-content/plugins directory.
4. Navigate to your Control Panel: Plugins
5. Under UberMenu, click Activate
   

What did this do?

Installing the Plugin doesn’t automatically change any navigation menus – so it immediately affect anything on your site, either. Once you install the plugin, you’ll get:

• A new Control Panel Menu under Appearance > UberMenu
• New options for Menu Items in the Appearance > Menus Control Panel
• A new meta options box labeled Activate UberMenu Locations in Appearance > Menus

Understanding Menu Placement

In WordPress, a theme defines where a menu will be placed. You can add UberMenu to your site in one of two ways.

1. Replace an existing menu theme location

2. Add a new menu theme location

Replacing Theme Locations

In WordPress 3.6, the theme locations settings were moved. They now appear on the Appearance > Menus > Manage Locations tab

as well as below the menu

In the example above, the theme has registered two theme locations, “Primary Menu” and “Footer Menu”. These are the two locations that UberMenu can automatically replace with a mega menu. You select which theme location will be replaced by UberMenu using the Activate UberMenu Locations meta box

Note that if a theme’s menu is not coded modularly, it may be necessary to make a simple edit to the header in order to Remove Residual Styling. If your theme is responsive and uses two menus, you may need to Handle Responsive Theme Menus as well.

WordPress 3.5 and earlier

Prior to WordPress 3.6, the Theme Locations settings appear in the main Appearance > Menus screen on the top left

Adding a new menu theme location

If you want to add a new menu in addition to your existing menus, or if your theme does not register any theme locations, you can use UberMenu Easy Integration. Easy Integration automatically registers a theme location called “UberMenu”, so all you have to do is add the code to print the menu within your theme template files, usually in header.php.

In the event of a vertical menu in a sidebar, you can also add the UberMenu Easy Integration shortcode in a text widget in your sidebar widget area.

Adding more theme locations and placing menus in new locations

In any of the following, please keep in mind that the one UberMenu per page rule still applies. Any mention of multiple UberMenus assumes that they will only exist on different pages.

If you are a developer, you can add as many theme locations and UberMenus as you want using the register_nav_menus and wp_nav_menu/UberMenu Direct. Details on the use of the WordPress Core functions are provided in the WordPress Codex, and are outside the scope of this documentation.

If you are not a developer, there are two resources at your disposal:

Menu Swapper. I’ve created this free plugin, which allows you to register unlimited theme locations through the control panel. You can also use it to swap out existing menus on your site on a per-page/post basis.

UberMenu Direct. This function will allow you to place an UberMenu anywhere within your theme templates. There are both a PHP function and shortcode at your disposal.

Don’t forget to activate your my-theme-location in Appearance > Menus for each menu that should be an UberMenu.

In a Widget Area or Content Area

To add UberMenu in a widget area or in post content, you can insert the Easy Integration shortcode into a text widget. For more information, see Easy Integration

Note that you cannot use a Custom Menu Widget to place UberMenu, because these widgets do not create theme locations and therefore there is no way to target them.

Setup the Menu

When you install UberMenu, a tour will begin which will walk you through the different screens used to configure UberMenu. Here is the text version:

1. Navigate to Appearance > Menus
2. Create a Menu, if you don’t already have one
3. Add Menu Items to your Menu.
4. Enable the Activate Mega Menu option on the top level menu items that should have mega submenus
   
   
5. Save your Menu
6. Set your menu in the appropriate Theme Menu Location of your Menu in the Theme Locations Meta Box
   

   WordPress 3.6+

   In WordPress 3.6, the theme locations settings were moved. They now appear on the Appearance > Menus > Manage Locations tab

   

   as well as below the menu

   

   WordPress 3.5 and earlier

   Prior to WordPress 3.6, the Theme Locations settings appear in the main Appearance > Menus screen on the top left

   

7. Activate the Menu Location as an UberMenu in the Activate Uber Menu Locations Meta Box

   

8. Customize your Mega Menu Items
   • First Level
     • Activate Mega Menu
     • Set Images
     • Set Descriptions
     • Set submenu alignment
     • Set submenu width (and columns if full width)
   • Second Level
     • Set Vertical Divisions
     • Set Content Overrides (shortcodes)
     • Set Widget Areas
     • Set Images
   • Third Level
     • Set Content Overrides (including shortcodes)
     • Set Widget Areas
     • Set Images
     • Set Headers
     • Set Highlights
     • Start new columns

If your menu does not appear on mobile devices or if both UberMenu and your theme menu appear, see Handling Responsive Theme Menus

Note that if your menu styles don’t look like the demo, you should check out the next section of the guide on Removing Residual Styling

Remove Residual Styling (Menu doesn’t look like the demo)

Sometimes, even after activating UberMenu, some of the theme’s default menu styles will still affect the menu – often negatively. These styles conflict with the UberMenu styles, and are known as “residual styling”. To make UberMenu function like the demo, we need to neutralize this effect. If you experience this issue with your theme, this section will help you resolve the issue. Otherwise, you can skip to the next section.

Skip to solution

Understanding the Issue

The reason this is an issue is that UberMenu can only control the output of the wp_nav_menu function – a core WordPress function. It cannot control what the theme does outside of this function.

Most menus use this basic structure:

<nav id="navigation">
  <ul class="menu">
    <li class="menu-item"><a href="/">Home</a></li>
  </ul>
</nav>

The theme then writes the styles and functionality for this menu based on the menu root element, #navigation

/* Sample theme menu styles */
#navigation{

}
#navigation ul.menu{

}
#navigation ul.menu li.menu-item{

}

/* Sample theme menu javascript */
$( '#navigation li.menu-item' ).hover( function(){
  //do stuff
});

The goal is that the #navigation ID should be removed when UberMenu is installed, thereby neutralizing theme CSS styles and javascript. The issue comes into play as to how that wrapper is created. The wp_nav_menu function provides the ability to set an ID and class for the menu wrapper, and themes should take advantage of this. That means that this single line of code in the theme template:

<?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container_id' => 'navigation' , 'menu_class' => 'menu' ) ); ?>

will desired the above HTML output. The problem occurs when themes choose to hard code the #navigation wrapper:

<nav id="navigation">
   <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?>
</nav>

The difference is that in the first example, UberMenu can replace the #navigation ID from the HTML output altogether, neutralizing the #navigation-based CSS styles, meaning there are no style conflicts. The result:

<!-- UberMenu's influence starts here -->
<nav id="megaMenu">
  <ul class="megaMenu">
    <li class="menu-item"><a href="/">Home</a></li>
  </ul>
</nav>
<!-- UberMenu's influence ends here -->

In the second example, UberMenu has no control over the hard-coded #navigation element, so all of the CSS styles from the theme will still apply, and will conflict with UberMenu styles.

<nav id="navigation">
  <!-- UberMenu's influence starts here -->
  <nav id="megaMenu">
    <ul class="megaMenu">
      <li class="menu-item"><a href="/">Home</a></li>
    </ul>
  </nav>
  <!-- UberMenu's influence ends here -->
</nav>

The Solution

We need to stop the theme’s menu CSS styles from affecting UberMenu. That means we can either adjust the identifiers (IDs and Classes) in the template, or remove the styles from the theme stylesheets. Since you generally don’t want to edit theme stylesheets, the former is often the preferred solution. That means we just change

<nav id="navigation">
   <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?>
</nav>

to

<nav id="navigation-uber">
   <?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?>
</nav>

<!-- OR -->

<?php wp_nav_menu( array( 'theme_location' => 'primary' , 'container' => false ) ); ?>

In the majority of cases, this code can be located in the theme’s header.php file. If not, you’ll need to search your theme for the wp_nav_menu function (with the appropriate theme_location).

For optimal forward-compatibility with your theme, it is always recommended to make theme customizations in a Child Theme. Generally this is as simple as copying your header.php to your child theme’s directory and making your edits there. Your theme provider should be able to advise you on best practices if necessary

For a more in-depth explanation and suggestions on how to resolve residual styling, please see Residual styling from the theme is affecting the menu display.

Handling Responsive Theme Menus

register_nav_menu( 'mobile-menu' , 'Mobile Menu' );

wp_nav_menu( array(
  'theme_location' => 'mobile-menu'
  /* other settings */
) );

Responsive theme menus have made menu integration more complicated. They can cause three main types of conflicts:

1. The theme may hide UberMenu at small sizes
2. The theme may hide UberMenu altogether
3. The theme may show both UberMenu AND theme menu (see If UberMenu replaces your responsive menu but not your main menu).

This is essentially a type of residual styling, and the same techniques are generally used to resolve the issue.

To use UberMenu with a theme that has an existing responsive menu, you need to choose whether you want to use UberMenu for your main menu only, or for your main and responsive menu.

Scenario A: Using UberMenu as your only menu (main and responsive)

In this case, your best option is to remove the entire theme menu system and replace it with UberMenu Direct.

For example, your theme likely does something like this

<div id="nav">
    <?php 
    //This order , theme_location, and classes may vary

    // this is the menu you'll see at widths greater than 960px
    wp_nav_menu( 'theme_location' => 'primary',  'container_class' => 'primary-menu' );

    // this is the menu that will be displayed on mobile devices
    wp_nav_menu( 'theme_location' => 'primary',  'container_class' => 'primary-menu-responsive', 'walker' => 'responsive_walker' ); 
    ?>
</div>

The whole thing would be replaced with

<?php
if( function_exists( 'uberMenu_direct' ) ){
  uberMenu_direct( 'primary' );
}
?>

(make sure your theme-defined theme_location, in this case `primary`, is passed to UberMenu Direct).

Scenario B: Using UberMenu as your main menu and your theme’s responsive menu

In this case, you’ll need to adjust the theme CSS to show UberMenu and its own responsive menu at the right times. This will vary from theme to theme, but will involve hiding and showing the #megaMenu div via media queries, for example:

@media only screen and (max-width: 960px){
   #megaMenu{ display: none; }
}

If necessary, the code for the theme’s menu will be specific to the theme.

In some cases, you may just need to adjust the Theme Location Instance – see If UberMenu replaces your responsive menu but not your main menu

Scenario C: Using UberMenu and Responsive Select Menu

In this case, replace the entire theme menu system as in Scenario A, then install the Responsive Select Menu plugin.

Integration Check

If you haven’t added any content yet, check back after you have.

UberMenu Troubleshooter

Theme-specific integration instructions

Don’t forget to check out the Theme Integration section of the guide. It includes theme-specific integration instructions for a variety of popular themes

Setup Timthumb (Optional)

While Timthumb is provided as a convenience, it is recommended that you simply upload properly sized images in the first place to maximize efficiency.

Configure server directory

1. To setup TimThumb you will need to make the ubermenu/standard/timthumb directory writeable
2. If you can, set the owner of the directory to your server’s username. For example, on Ubuntu you would run:
   sudo chown www-data -R wp-content/plugins/ubermenu/standard/timthumb
   (If you are using shared hosting, you should ask your host to advise you on timthumb best practices to avoid security issues)
3. If not, you can set the permissions of the timthumb/cache directory to 755 (or 775 if necessary).

   Please note that while 775 is the timthumb-recommended setting, a more secure permission setting is 755, and if your timthumb works at this setting, it is recommended. Also, depending on how your server security is set up, some servers will not allow timthumb to run when permissions are 775. The solution is to change them to 755.

4. Otherwise, see this site for installation instructions
5. Note that use of Timthumb is not necessary, and that some hosts do not allow you to run the script.

Enable Timthumb

1. Navigate to the UberMenu Control Panel > Images
2. Enable Resize Images
3. Set your preferred image width and height
4. Enable Use Timthumb

Setup Widgets

1. 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.
   
2. Navigate to Appearance > Widgets and add widgets to the UberMenu Widget Areas

   

3. 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)
4. Click Show/Hide UberMenu Options
5. In the Display a Widget Area select box, select the Widget Area to display in this Menu Item

   

6. Save the Menu
7. 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.

Easy Integration

UberMenu works by applying filters to a WordPress 3 Custom Nav Menu. These menus are inserted into the page via your WordPress Theme. Normally, UberMenu automatically replaces your theme’s WordPress 3 custom menu, when WordPress 3 custom menus and theme locations are supported. If your theme does not already properly support custom menus, or if you wish to add an additional menu, you can add support by turning on UberMenu Easy Integration and adding a line of PHP code. Note: you still need to be running WordPress 3.3 or above for this to work.

Setting up Easy Integration involves three steps:

1. Activating WordPress 3 Custom Menu Support
2. Placing the Menu
3. Activating the UberMenu Theme Location

Need to add multiple menus to your theme on different pages? Check out UberMenu Direct, which does the same thing as Easy Integration but with configurable theme locations

1. Activating WordPress 3 Custom Menu Support

1. Navigate to Appearance > UberMenu
2. Under Theme Integration, enable Easy Integration
3. Click Save Settings

This will automatically register a theme location called “UberMenu”

2. Placing the Menu

If you have already applied uberMenu_easyIntegrate() via a filter or hook (following one of the theme integration guides, for example), you can skip this step – the hook code has already placed the menu.

Option 1: In a PHP Template

Now that the theme supports WP3 Menus, we’ll need to actually insert the menu somewhere in your theme template.

It is always recommended that you create a Child Theme and make your edits there, for maximum forward compatibility and ease of maintenance with your theme. Most premium themes include a starter child theme in the download package.

Replacing an existing menu

If you want to replace your theme’s old menu, you’ll need to locate the original menu code, which will generally look like one of these three functions:

1. wp_nav_menu without proper use of the theme_location parameter.
2. wp_list_pages
3. wp_page_menu

though it can vary depending on your theme.

Once you’ve removed the old menu and any surrounding <ul> tags, you’ll want to insert the following PHP
code where the menu should be displayed. Usually this would be inserted in your theme’s header.php file, but again this may vary depending on your theme and your goals.

Adding a new menu

If you are adding an additional menu, you’ll want to add the code wherever you want the menu to display, generally within your theme’s header.php.

Easy Integration PHP Code

Here’s the one line of code to add to your template:

<?php uberMenu_easyIntegrate(); ?>

Note: The above menu call should never be located inside <ul> tags, even if your theme’s default menu is. If you are removing residual styling, you may also need to edit or remove the class or IDs of the div/nav elements surrounding the Easy Integration code.

Option 2: In a widget or content area

If you are adding UberMenu to a widget area / sidebar or content area, normally you’ll want to add the Easy Integration shortcode within a text widget to place your menu. You can also place the PHP above in the sidebar.php, for example.

[uberMenu_easyIntegrate echo="false"]

You place the text widget containing the shortcode in a widget area defined by your theme, not in a custom UberMenu Widget area.

3. Activating the UberMenu Theme Location

Completing the above two steps should successfully enable your theme to work with UberMenu, giving you an “UberMenu” theme location in your menus panel. Now just configure UberMenu as usual!

Specifically, you will need to set the menu in the UberMenu [Easy Integration] Theme Location

Activate UberMenu on the theme location as you would normally

You will need to activate the UberMenu [Easy Integration] location

Assign your menu to the UberMenu [Easy Integration] theme location

WordPress 3.6+

In WordPress 3.6, the theme locations settings were moved. They now appear on the Appearance > Menus > Manage Locations tab

as well as below the menu

WordPress 3.5 and earlier

Prior to WordPress 3.6, the Theme Locations settings appear in the main Appearance > Menus screen

Vertical Menus

If you are using a Vertical menu, you will likely want to set the mega submenu width under Basic Configuration > Vertical Menu Sizing. Otherwise, your submenu’s width will be limited by the width of the menu bar – which is naturally narrower in a vertical state.

To size each submenu individually, you’ll need to write custom CSS for each submenu. See How to Style One or More Menu Items (or Submenus) Differently

UberMenu Direct

If you intend to insert UberMenu directly into your theme as your primary menu, so that it won’t need to be activated as an UberMenu in Appearance > Menus, you can do so using the uberMenu_direct function. It is best practice to check for the function’s existence in case the plugin is disabled.

This assumes you have already registered a theme location. Replace 'primary' with the name of your theme location ID.

<?php 
if( function_exists( 'uberMenu_direct' ) ){
  uberMenu_direct( 'primary' ); 
}
?>

You can also use the uberMenu_direct shortcode.

[uberMenu_direct theme_location="primary"]

If you do not already have a theme location to use, you can enable UberMenu Easy Integration in the Control Panel, and then pass 'ubermenu' as your theme location.

If you need to register new theme locations without adding code, you can check out the Menu Swapper plugin.

Upgrading from 1.1.x to 2.x

Please review the following notes on upgrading

1. It is recommended to test on UberMenu 2.0 in a test environment and not on a live production site.
2. Please back up your WordPress installation before installing so that you may revert easily if you do not like the changes.
3. Both UberMenu Settings and individual menu item settings should be intact
4. As the structural CSS has been modified, customizations may no longer appear as desired and may require modification
5. If you have used the Style Generator, styles may no longer apply as desired. If you want to keep your old styles, you should make a copy of the CSS output, as they will not transfer – you can paste this CSS in the custom.css file if you wish to continue using this skin.

Installing the 2.0 update

1. Backup your old UberMenu directory – to be safe, you should back up your entire WordPress installation, including database
2. Deactivate UberMenu in the Plugins panel
3. Delete the old UberMenu directory, wp-uber-menu. You will likely encounter errors if you try to install the new version without deleting this version first.
4. Install UberMenu 2.0 as a normal WordPress plugin (the new directory is just ‘ubermenu’)
5. Note that if you are using Timthumb and your images are not appearing, you may need to make the directory writable, even if you have done so previously.

Upgrading from 2.0.x – 2.2.x to 2.3.x

Activate UberMenu Locations

You’ll notice a new Meta Options box in the Menus Control Panel. This panel determines whether a particular menu location will be megafied. The location of your menu must be activated in order to megafy the menu. This allows you to have certain one location megafied while others remain normal menus.

Please note that you can only have one Mega Menu per page. You could have 2 mega menus, but only if they never occur on the same page.

Menu Item Options

UberMenu integrates directly with the WordPress Menu System. It adds new options to the Menu Items you can add via Appearance > Menus. The function of each option is detailed in the hover-tooltip available to the right of each option in the Appearance > Menus screen. Note that different levels of menu items (top, second, third) will have different options available to them.

UberMenu Control Panel

The UberMenu Options Panel is the place to customize your UberMenu. It is accessible via your Control Panel, under Appearance > Uber Menu. With it you can:

• Configure settings like orientation, transition, trigger event, description display, image size, and more
• Set how you’d like to style your Menu
• Select Style Presets
• Create Custom Styles and generate CSS
• Preview your Menu
• and a lot more

Each option has a description which explains what it does right in the control panel for easy reference.

Menu Bar Positioning

#megaMenu.megaMenuHorizontal ul.megaMenu{
	text-align:right;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item{
	float:none;
	vertical-align:top;
}

This is the menu bar:

When we refer to the menu bar, we’re referring to the container that wraps the top level menu items; not the submenu or any individual menu item.

Menu Bar Width

The menu bar has two modes that affect its width:

Full Width Mode

When Expand Menu Bar Full Width is activated (as it is by default), UberMenu will expand to 100% of its container element. The container element is defined by the theme. If the theme has defined the container element to be 50% of the inner width of the page, UberMenu will expand to 50% of the inner width of the page. If the theme has not defined a width in the containers surrounding UberMenu, it will expand to the edges of the viewport.

These constraints are set entirely by the theme and are not controlled by UberMenu

Note that UberMenu cannot expand beyond the width of its container, so if the width of your menu bar seems limited, you should check the container defined by the theme.

Remember, if you have Full Width Mode enabled, aligning the menu to the left or right will make no difference, as the menu takes up the full width of its container and is already aligned with both extents

Natural width mode

If you disable Expand Menu Bar Full Width, the menu bar will automatically size to the width of the top level menu items. That is, there won’t be any extra space on either side of the first and last menu items.

It is important to realize that the maximum width of the mega menu submenus is restricted to the width of the menu bar. If your menu bar is too narrow, your submenu columns will automatically stack if there is not enough horizontal real estate to accommodate them.

Menu Bar Positioning

Theme Container

The position of the menu bar is dictated by the theme’s container. Under normal circumstances, UberMenu will appear in the same location as the standard theme menu.

To change the position of the menu, a PHP edit, a CSS edit, or both may be required.

Misplaced menus

If you activate UberMenu and the menu is no longer located where the original theme menu was located (for example, if the menu used to be below the logo but now it is above), it is likely that your theme’s header elements are positioned absolutely. There’s no way for UberMenu to predict this, and since elements are positioned relatively by default, UberMenu will float to the top of the absolutely positioned elements.

The solution is position UberMenu absolutely as well. Generally the easiest solution is to find the old positioning code from the theme and apply it to UberMenu. For example, the original menu may have been positioned like this:

.nav{
  position:absolute;
  top:50px;
  right:0;
}

To properly position UberMenu, you’d add code like this:

#megaMenu{
  position:absolute;
  top:50px;
  right:0;
}

Centering

There are three types of “centering” – be sure to pick which one you mean: the entire menu bar, the inner menu bar, or the menu items.

Centering the (entire) menu bar

If you want to center the menu bar, you can do so in the Control Panel. Sometimes this is necessary if when UberMenu replaces your theme menu it expands the full width of the window, and you mean to keep it within the bounds of your content area.

1. Navigate to Appearance > UberMenu > Advanced Settings
2. Set the Menu Bar Width to the width of your content (or other desired width). 960px is a common width.
3. Enable Center Menu Bar.
4. Enable Enable Clearfix if it is not already on
5. Don’t forget to disable the Expand Menu Bar Full Width option in Appearance > UberMenu > Basic Configuration.
6. Save your settings

Your menu bar should now be centered.

Centering the inner menu bar

Sometimes, you want the menu bar to span the entire width of your window, but the menu items should be bound within the extents of the site content.

Note that to have the menu bar expand the full width of the window, its parent element must be the full width of the window. The menu bar cannot be wider than its container element.

1. Navigate to Appearance > UberMenu
2. In the Basic Configuration panel, activate Expand Menu Bar Full Width
3. In the Advanced Settings panel, leave Menu Bar Width empty, and disable Center Menu Bar
4. Enable Enable Clearfix
5. Set the Inner Menu Width to the width of your site content. 960 is a common width
6. Enable Center Inner Menu

Your inner menu bar should now be centered to your content.

Centering the items themselves within the menu bar

If you want the menu items themselves to be centered (as opposed to their container), you can easily do this in the Control Panel > Advanced Settings > Center Menu Items

Please note that if you center the menu items themselves, you may induce formatting issues with advanced features like top level images, widgets or shortcodes. This is due to the necessary change in display properties required in order to center the menu items. You may need to use custom CSS to align your menu elements as desired

You may want to add styles like this

#megaMenu.megaCenterMenuItems ul.megaMenu > li.menu-item{
  vertical-align:middle;
}

Aligning Right

If you want to position your menu bar to the right of the layout, you can add this CSS to float it to the right:

#megaMenu{
    float:right;
}

Also be sure to disable the Expand Menu Bar Full Width option in the UberMenu Control Panel. If the menu bar is full-width, floating it will not make it less than full width

Remember that your submenus can only be as wide as your top level menu bar by default.

If you need to expand your submenus wider than your menu bar, see Submenu Widths: Extended Width

It’s important to note that if your submenu is too narrow (as restricted by your menu bar), you may force your submenu columns to stack because they do not have enough horizontal space to fit two to a row

Item Layout Mapping

It’s critical to understand how menu structures created in the Appearance > Menus screen map to UberMenu Layouts. Here’s a diagram showing how first, second, and third level menu items are organized into a mega menu layout.

Top (First) Level Menu Items

Laid out horizontally, left to right. Always visible on the menu bar.

For a horizontally-aligned menu, the top level menu items are listed in the row of main links in the navigation menu. For a
vertically-aligned menu, these items are aligned in a column. The top level menu items are always visible.

Examples of Top Level Menu Items: Flyout Menu | Mega Menu | Mega Menu + Descriptions

Second Level Menu Items (Column Headers)

Laid out horizontally, left to right, within a submenu. Act as submenu Column Headers.

The second level menu items (those that are indented once below top level menu items) are treated as headers within the
sub menus. They contain third level menu items to for sub menu groups. These groups are aligned as columns within the sub menu,
with the second level menu items as the headers at the top of each column.

Example of Second Level Menu Items, sub-menu of MegaMenu + Descriptions: Monday | Tuesday | Wednesday

Third Level Menu Items and Below

Laid out vertically, top to bottom. Listed below their second level item header.

All menu items deeper than level 3 are treated as level 3 menu items. These items are the content links within their parent
categories. Sibling items are aligned vertically in list-fashion below their column headers (second level menu items).

Example of Third Level Menu Items, under Mega Menu + Descriptions > Monday: How I Met Your Mother | House | Castle

Submenu Widths

Out of the box, the width of a mega submenu can be determined either naturally (based on the width of its contents) or set to full width. Each submenu can be sized independently.

Natural (sized-to-content)

Naturally sized submenus are the default. That means that the width of the submenu container will be based upon the width of the columns within that container. This is a naturally sized submenu:

The submenu is only as wide as the items inside it.

To use natural width submenus, turn on jQuery Enhancements (it’s enabled by default), and don’t check “Full Width Submenu” on your top level menu item. In other words, your submenus will be sized naturally if you don’t make any changes to the settings.

Note: Natural width submenus are only valid for jQuery Enhanced menus – without jQuery, the submenu cannot be centered, which can result in accessibility issues, so the menu will be set to full-width automatically

Full Width

A full width submenu will span the entire width of the menu bar – no more and no less. Here is an example of a full width submenu.

Note that the submenu would still be that wide even if there were only two second level menu items (columns).

You can make any submenu full width by checking the Full Width Submenu checkbox on the top level menu item

Note that if you are using full width submenus, you can set the number of columns per row explicitly.

You can also set all your submenus to be full width automatically via the UberMenu Control Panel > Basic Configuration. This will override individual submenu settings.

It’s important to note that if your submenu is too narrow (as restricted by your menu bar), you may force your submenu columns to stack because they do not have enough horizontal space to fit two to a row

Extended Width

Whether you are using natural or full width submenus, your submenus will never expand beyond the width of the menu bar out of the box.

Why is this? The submenu width has to be bounded somehow, otherwise it could conceivably extend beyond your content area and off the edge of the viewport, causing major user experience issues.

Sometimes, however, you want the submenu to extend beyond the width of the menu bar. The most common scenario is that you have a narrow menu bar aligned to the right of your header, and you want the submenu to be able to extend beyond the left edge of the menu bar. Here’s an example of the desired outcome:

In this case, we can explicitly set the width of the submenu to be wider than the menu bar with some custom CSS.

1. For submenus that you’d like to expand, select Full Width Submenu on the top level menu item.
2. Then, set the submenu alignment Right (optional, or set left depending on your situation).
3. Next, add this code to expand the submenu beyond the width of the menu bar:

   #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
       width:940px !important;    /* Adjust as desired */
       max-width:none !important;
   }
   

4. Alternatively, you can set the left or right values manually (rather than setting the alignment):

   #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
       width:940px !important;    
       max-width:none !important;
       right:0;
       left:auto !important;
   }
   

5. If your site is responsive, you will want to add some media queries to handle the submenu widths when your window is less than 940px, for example. One way to do this would be to wrap the code above in a media query:

   @media only screen and (min-width: 960px){
       #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
           width:940px !important;    
           max-width:none !important;
       }
   }
   

   Alternatively, you can add media queries for various sizes and adjust the width of the submenu manually. How you accomplish this is totally up to you and dependent on your site and goals.

Static Width Submenus

If you wish to set a static width for your submenus, this is as simple as adding some Custom CSS. Just find the ID of the submenu’s parent item, and set the width:

#megaMenu ul.megaMenu > li#menu-item-100 > ul.sub-menu{
   width:300px;
}

Generally it is better to leave your submenus at flexible (non static) widths, sized to their contents, for maximum responsiveness.

Submenu Column Layouts

Out of the box, UberMenu puts no restrictions on submenu column widths (beyond that they can’t exceed the width of the submenu). If you don’t place any restrictions on these submenu columns, the columns are considered Natural Width. If we specify exactly how much of the row they should take up, they are Percentage Width.

Natural Width

Natural width columns are sized to the contents of the columns. Basically, the widest second or third level item in the column will determine the column width. So you could end up with something like this:

Notice that the first column is much larger than the others, due to the How I Met Your Mother item title.

You can use natural width columns with either full width or natural width submenus – but normally natural width submenus work best in this case.

Percentage Width

Percentage width columns take up a specific, equal percentage of the submenu. That is, you can set the submenu to 4 columns, and each column will be exactly the same width (25% of the submenu width). Here’s an example with a full width submenu set to 4 columns:

In this case, note that the extra long title in the first column is forced to wrap, rather than expand the column, as all columns take up exactly 25% of the submenu width.

In order to use percentage columns, set your top level menu item to enable Full Width Submenus and set the Submenu Columns [Fullwidth] value to your desired number of columns (up to 7).

Note that percentage width columns only work with full width submenus. This is because using percentage width columns with natural width submenus would create a circular dependency (the width of the columns would depend on the width of the submenu, but the width of the submenu would depend on the width of the columns). You could, however, customize your submenu and set an explicit width less than that of the menu bar and use columns with non-full-width submenus, but that is outside the scope of this document.

Percentage width columns are especially useful for submenus with multiple rows of columns, ensuring that columns from each row align properly

Pure CSS Menus

UberMenu can function as a pure CSS menu – meaning, without an javascript. You can disable jQuery Enhancements if you wish in the UberMenu Control Panel under Basic Configuration

There are some important things to note about using Pure CSS menus:

1. All mega submenus will be full width

This is because without javascript, the submenu can’t be centered. Therefore, it need to be expanded full width so that it is always guaranteed to overlap its parent menu item to allow for the submenu to be selected.

2. There will be no transition effect

Transitions are javascript-only

3. The only trigger is hover

Click and hoverIntent triggers are only available via javascript.

4. No Maps

The Google Maps API is engaged using jQuery. Without loading the script, you’d need to write your own javascript to use maps.

5. Mobile Devices

Not all mobile devices map touch events to CSS hover events in the same way, so user experience may not be as consistent across devices without javascript enabled.

jQuery Enhanced Menus

Out of the box, you menu will be jQuery Enhanced. There is one major layout advantage over pure CSS menus (beyond interface embellishments).

Full Width or Natural Width Submenus

With jQuery Enhancements enabled, you can choose between full or natural width submenus. The javascript can then center-align your naturally-sized submenu below the top level menu item.

You can also choose from left or right submenu alignments if you choose.

Widget Columns

Widgets work differently than normal menu items. When you attach a widget area to a menu item, that menu item will automatically expand to the full width of the submenu. Then, the widgets that you add to the widget area will automatically form columns.

Here’s a diagram of how a layout involving widgets works. A single second level menu item spans the entire top row of the submenu. Attached to it is a single widget area. That widget area contains 3 widgets. Those widgets become the columns in the submenu.

Sharing a row with widgets and normal menu items

Since a widget area always takes up an entire row, it’s not possible to have a normal menu item column and a widget column in the same row out of the box.

Sidenote: Depending on your use case, the simplest way to embed a widget within a column can be to attach it to a third level menu item rather than a second level menu item. As a second level menu item, a widget area will expand to the full width of the submenu; as a third level menu item, it’ll expand to the width of its parent column. Of course, in this case you’ll likely only want a single widget in your widget area. This guide deals with making a second level menu-item attached widget share space with normal second level menu items.

If you wish to have a widget area share a row with normal menu items, you’ll need to make some CSS customizations to make them act like normal widget items. Essentially, this means floating the item left, adjusting its width, and removing the clear.

#megaMenu li#menu-item-XX{
    float:left;
    clear:none;
    width:auto;
    padding:11px 27px;    
}  

Where #menu-item-XX is the ID of your menu item to which the widget area is attached.

Note that if you want to add more than one widget to this widget area, you may get unpredictable results (because the widget area is told to “size automatically”, while the widgets are told to “size to the parent container”. This is essentially a circular reference, and the result is unpredictable). Setting an explicit width (instead of ‘auto’) resolves the issue.

Multiple Headers in a Single Column

Normally, each row completely clears the previous row. So with this menu item hierarchy:

• Top Level
  • One
    • Red
    • Blue
    • Green
  • Two
    • Purple
    • Orange
    • Yellow
    • Grey
    • Black
  • Three
    • Dog
    • Cat
    • Bird
  • Four
    • Horse
    • Cow
    • Zebra
  • Five
    • Hospital
    • Post Office
    • Fire Station
  • Six
    • Bank
    • School
    • Gas Station

Results in this layout:

As you can see, the second row clears the first row entirely.

To create the following layout instead:

You can use the Header Display menu item option, moving the flattening out the lower columns into third level menu items, and organize your items this way: (Display as Header Items in bold red)

• Top Level
  • One
    • Red
    • Blue
    • Green
    • Four
    • Horse
    • Cow
    • Zebra
  • Two
    • Purple
    • Orange
    • Yellow
    • Grey
    • Black
    • Five
    • Hospital
    • Post Office
    • Fire Station
  • Three
    • Dog
    • Cat
    • Bird
    • Six
    • Bank
    • School
    • Gas Station

The menu item option looks like this (a third level menu item):

Multiple Columns Under a Single Header

Are you using UberMenu 3? Then you’ll want to use Columns and set Submenu Column Default for your header item to divide them into the appropriate number of sub columns

If you want to split up a set of third level submenu items into multiple columns under a second-level header, like this:

You can keep all of your menu items under that header like this

And begin a new column by checking the Start a new column (under same header) option on the item that should begin the second column.

Content Creation Basics

To create an UberMenu, follow the Setup Instructions, and then add content to your Menu.

Items are added via the normal WordPress 3 Menu Management mechanism. For more information, read this.

UberMenu adds special menu item options to each menu item, and this is how you control the display and content of the menu items.

For a complete walkthrough in adding content to recreate the UberMenu Demo, check out the Video Tutorials

Normal Flyout Menus

Even in an UberMenu, you can still create a normal flyout menu. Just make sure that Activate Mega Menu is NOT checked on the top level menu item. Add items as usual. Note that if the top level item is not a Mega Menu, the Mega Menu options are non-applicable, except for disabling text and links, and Align to Right Edge.

Mega Menu Normal Link Content

Adding normal link content to a Mega Menu is as simple as creating a flyout menu. Just make sure that Activate Mega Menu IS checked on the top level menu item.

Second level items create column headers and third level items fill the content below those headers. See the Layout section for more information on how to create the layout you want.

Video Tutorial

Mega Menu + Descriptions

Are you using UberMenu 3? Please visit the Descriptions article in the UberMenu 3 Knowledgebase

Adding descriptions to your Menus is simple with UberMenu. Here’s how to set them up:

1. Activate the description levels you’d like to use in the Appearance > UberMenu > Descriptions, Shortcodes, Widgets control panel. Turn on the levels you’d like to activate.
   
   

   Note: this is done because descriptions are often set by default to the excerpt or full post text – if you only want to display descriptions on a particular level, this saves you from deleting all of the menu item descriptions on other levels.

2. In the Appearance > Menus panel, click the Screen Options tab in the upper right corner of the screen.
   
   
3. In the Show advanced menu properties section, check the Description box.
4. Now in every Menu Item box, there should be a text area labeled Description. Enter text to set a description.
   
   
5. Save your menu.

Video Tutorial

Images

UberMenu makes it easy to apply an image to each menu item, on any level. The image is placed to the left of the menu item text. Images can be automatically resized. You can control how this is done (via TimThumb or normal browser scaling) and to what size the images are scaled through the UberMenu Control Panel under Images.

Here’s how to apply an image to a Menu Item:

UberMenu 2.4+

1. Add a Menu Item
2. Click Show/Hide UberMenu Options to display the advanced options.
3. Click Set Thumbnail
   
4. A popup dialogue appears.
5. Upload or select the image through the normal WordPress Media Uploader
   
6. Make sure the image you want to use is selected (with the checkmark), then click Select
   
7. The image is now set for that menu item
   
8. The image will automatically update without re-saving your menu.

UberMenu 2.3.2.2 and earlier

1. Add a Menu Item
2. Click Show/Hide UberMenu Options to display the advanced options.
3. Click Set Thumbnail
4. A popup dialogue appears.
5. Upload or select the image through the normal WordPress Media Uploader
6. Click Use as Featured Image this is critical
7. Change any other settings, like title, etc, and click Save All Changes
8. Close the popup
9. You should now see a preview of your image in the Menu Item
10. The image will automatically update without re-saving your menu.

Video Tutorial

Images without text

If you want to create image-only links (icons but no text), follow the Adding Images instructions, then just check the Disable Text option on that menu item.

Note that you still need to set a Navigation Label, even though it won’t be displayed. If you try to save the item with a blank Navigation Label, the item will be removed by the WordPress menu system.

Video Tutorial

Widgets

Adding content via widgets is easy, but takes several steps. The basic process is to (1) Create a Menu Item (2) Set the Menu Item’s Widget Area (3) Populate the Widget Area with Widgets. You should think of a single menu item, which contains a single Widget Area, as a full-width row in the submenu of the menu. Multiple widgets in a single widget area automatically create columns within that row.

1. Set the number of Widget Areas you are going to use via the Control Panel Appearance > UberMenu > Descriptions, Shortcodes, Widgets > Number of Widget Areas. It must be set to at least 1 to use widgets.
   
   
2. Save the UberMenu options with your new Number of Widget Areas.
3. Create a Menu Item (or edit an existing menu item) – second level menu items work the best
4. Expand the UberMenu Options and select a Widget Area in the dropdown next to Display a Widget Area
   
   
5. Save your Menu
6. Navigate to Appearance > Widgets
7. Add Widgets to the Area that you selected in step 3, UberMenu Widget Area X
8. Note that you may use shortcodes within text widgets.
9. Save your widgets

Video Tutorials

Naming your widget areas

By default your widget areas will be named sequentially as “UberMenu Widget Area #”. If you want to tag them with something more memorable, provide your desired names in the control panel. They will be applied in order.

Custom Content & Shortcodes

Using content overrides, you can add any custom content to your menu you want, including shortcodes.

Adding content is easy, but formatting is sometimes unpredictable. You may need to apply custom CSS styles to your menu in order to make your shortcodes display the way you’d like them to – especially custom widths.

1. In the Control Panel under Appearance > Uber Menu > Descriptions, Shortcodes, Widgets, turn Allow Content Overrides on
   
   
2. In Appearance > Menus, add an item to your menu
3. Expand the UberMenu Options for the Item.
4. Enter your custom content in the Content Override box.
5. Save your menu.
6. Apply custom styles if necessary

Video Tutorials

Included Shortcodes

[ubermenu-search]

/* Text Input Box */
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform input#s{
  /* Your styles */
}
/* Go Button */
#megaMenu ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform input#searchsubmit{
  /* Your styles */
}

function custom_searchform(){

	$placeholder = __( 'Search' , 'ubermenu' );

	$form = '<form class="ubersearch-v2" role="search" method="get" id="searchform-custom" action="' . esc_url( home_url( '/' ) ) . '" >
	<div class="ubersearch"><label class="screen-reader-text" for="s">' . __( 'Search for:' , 'ubermenu' ) . '</label>
	<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="'. $placeholder .'" />
	<input type="submit" id="searchsubmit" value="'. __( 'Go' , 'ubermenu' ) .'" />
	</div>
	</form>';
	
	return $form;
}
add_shortcode('custom-search', 'custom_searchform');

#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform-custom input[type="text"]#s{
    /* Your styles here */
}

[ubermenu-map address="Boston, MA" zoom="15" title="My Title"]

[ubermenu-recent-posts num="3" img="on" excerpt="on" category="cat_slug"]

[ubermenu-colgroup]
 
    [ubermenu-col colspan="2"]
        <h4>Column 1/2</h4>
        Curabitur in enim ipsum. Tel congue purus pharetra.  Nullam eget 
        malesuada justo. Sed egestas, velit vel aliquet vestibulum, urna 
        urna dapibus enim, non hendrerit lacus urna non justo.  Aliquam 
        blandit magna eu enim auctor euismod.
    [/ubermenu-col]

    [ubermenu-col]
        <h4>Column 1/4</h4>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc auctor 
        dolor vitae felis accumsan.
    [/ubermenu-col]
     
    [ubermenu-col]
        <h4>Column 1/4</h4>
        Suspendisse ut purus nulla. Integer viverra diam sed augue pretium 
        iaculis. 
    [/ubermenu-col]
 
[/ubermenu-colgroup]

Contact Form

Contact forms can be added using Contact Form 7. Just paste the shortcode provided into either a Content Override box or a Text Widget. You will almost certainly want to add this to a second level menu item in order to make it appear in your submenu.

Contact Form Text Widget

Result:

Horizontal Rules

To add a horizontal rule to your menu, enter the special character sequence --divide-- into the Navigation Label of a Menu Item. This Menu Item may contain widgets or shortcodes, or it may be left blank. To start a new row with the horizontal rule, check the Vertical Division box.

The UberMenu Tab

Here’s a visual map of how the UberMenu submenu is laid out (click to enlarge)

Video Tutorials

Vertical Menu Setup

If you are using a Vertical menu, you will likely want to set the mega submenu width under Basic Configuration > Vertical Menu Sizing. Otherwise, your submenu’s width will be limited by the width of the menu bar – which is naturally narrower in a vertical state.

To size each submenu individually, you’ll need to write custom CSS for each submenu. See How to Style One or More Menu Items (or Submenus) Differently

How to add a Vertical UberMenu in a Sidebar

Are you using UberMenu 3? Please check out the UberMenu 3: Vertical Menu in a Sidebar article.

Adding a new menu in a sidebar

If your theme already includes a sidebar menu with a registered theme location, you can use UberMenu as usual and simply activate that theme location. However, if you need to add a new menu where one previously did not exist in the sidebar, you’ll want to add a new text widget containing UberMenu via the Easy Integration shortcode.

1. Enable UberMenu Easy Integration in the UberMenu Options Panel
2. Activate “UberMenu” in Activate Uber Menu Locations and set your desired menu under “UberMenu” in Theme Locations in Appearance > Menus.
3. Add a new Text Widget to the sidebar of your choice.
4. Set the content of the Text Widget to:
   [uberMenu_easyIntegrate echo="false"]

How to place the menu in a RIGHT sidebar

Please note that this FAQ is here to assist you as a reference guide, but it is considered a customization outside the realm of supported features.

By default, UberMenu flys out to the right, so we’ll need to add some custom CSS to adjust that if we’re using it in a right sidebar. After completing the above steps, continue with these instructions for a menu in the right sidebar:

1. Add this CSS to either your custom.css file or to a location where you store custom CSS

   #megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu,
   #megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1{
       left:auto !important;
       right:100% !important;
   }

2. Modify any other CSS you want, for example to remove or reverse the dropdown/flyout arrow indicators. You may want to adjust the submenu styles, for example:

   #megaMenu.megaMenuVertical ul.megaMenu > li.ss-nav-menu-mega > ul.sub-menu-1, 
   #megaMenu.megaMenuVertical ul.megaMenu li.ss-nav-menu-reg > ul.sub-menu{
       border-left:1px solid #ddd !important;    
       border-right:none;
       box-shadow:-2px 2px #eee;
   }

3. Customize the menu as usual.

Reverse Arrows

Here’s some code to help with reversing the arrow indicators

#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > a::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > a::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > a::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator::after,
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator::after{
  right:auto;
  left:3px;
  top:50%;
  margin-top:-3px;
  border-style: solid solid solid none;
  border-color: transparent;
  border-right-color: #999;
  border-width: 2px 3px 2px 0px;
  padding-left: 1px;
}

Vertical Submenu Alignment

Default Alignment

Out of the box, your submenus will be vertically centered to their parent menu items. That means there will be an equal amount of submenu above and below the top level menu item, without exceeding the bounds of the top end of the menu bar. This ensures that the parent item and submenu areas are adjacent, so that the submenu will be accessible on hover.

If your submenus are not centering as described above, you likely have a javascript error that needs to be resolved. Lack of animated submenu reveal is also an indication.

Align to the top of the menu bar

If you want to align a submenu to the top of the menu bar, regardless of the position of its parent item, enable the Full Width Submenu option on the top level menu item.

Make sure you only do this if your submenu is tall enough to reach the parent menu item in the menu bar, otherwise it will not be accessible.

Align to top of parent item

If you want to align the submenus to their parent items, rather than relative to the menu bar, add this CSS:

#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0{
	position:relative;
}
#megaMenu.megaMenuVertical ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0 > ul.sub-menu{
	top:0 !important;
}

Responsiveness & Breakpoints

Unlike other responsive systems, UberMenu uses a single set of menu items that are displayed at all sizes. Using CSS, the menu format adapts to the various device widths to present a quality navigation experience as the viewport resizes.

Breakpoints

> 960px

Approximate device size: Full Size Monitor or Horizontal Tablet/iPad

Target Media Query

@media only screen and (min-width: 960px){

}

767px – 960px

Approximate device size: Vertical Tablet/iPad

Any menu items that don’t fit on the top level will automatically wrap to a second row. Submenus still accessible as normal.

Target Media Query

@media only screen and (max-width: 960px){

}

480px – 767px

Approximate device size: Horizontal Phone/iPod

Below 767px, the menu collapses to a single bar that can be clicked/tapped to expand the submenu items.

Default state

Expanded state

Top level menu items will be laid out from left to right, top to bottom, with two menu items on each row.

Submenu open state

Target Media Query

@media only screen and (min-width: 480px) and (max-width: 767px) {

}

< 480px

Approximate device size: Vertical Phone/iPod

Below 480px, the menu collapses further and top level menu items will each take up an entire row.

Default state

Expanded state

Submenu open state

Target Media Query

@media only screen and (max-width: 479px){

}

Mobile Devices

#megaMenu ul.megaMenu li.menu-item a span.uber-close,
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close{
    top:0;
    right:0;
    background:#999;
    background:rgba( 0, 0, 0, .9 );
    font-size:20px;
    font-weight:bold;
    color:#f5f5f5;
}

/* Style the "x" */
#megaMenu ul.megaMenu li.menu-item a span.uber-close[data-uber-status="open"],
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close[data-uber-status="open"]{
  background:red;	
}
/* Style the down arrow */
#megaMenu ul.megaMenu li.menu-item a span.uber-close[data-uber-status="closed"],
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close[data-uber-status="closed"]{
  background:blue;	
}

This article is for UberMenu 2. If you are using UberMenu 3, please check out the UberMenu 3 Knowledgebase: Touch Interface

The first thing you need to understand about touch devices (smart phones and tablets), is that there is no true “hover” event, as there is with pointer (mouse-based) devices. A gesture (tap) on the screen must be translated into a hover or click event in the browser. The intent of the user is unknown, so the gesture is somewhat ambiguous. Since on menu items, hover and click have two distinct functionalities (open submenu versus follow link), the OS must use its “best judgment” to approximate click and hover events based on taps.

Responsive & Mobile Docs

ShiftNav – Responsive Mobile Menu

ShiftNav is built to work with UberMenu (just set the menu to hide as #megaMenu).

ShiftNav offers a free version as well as a Pro version with more advanced features. The free version can be downloaded from the WordPress repository.

ShiftNav Demo ShiftNav Free ShiftNav Pro

Responsive Select Menu

Responsive Select Demo Download Responsive Select Menu

Handling Responsive Theme Menus

Responsive theme menus have made menu integration more complicated. They can cause three main types of conflicts:

1. The theme may hide UberMenu at small sizes
2. The theme may hide UberMenu altogether
3. The theme may show both UberMenu AND theme menu (see If UberMenu replaces your responsive menu but not your main menu).

This is essentially a type of residual styling, and the same techniques are generally used to resolve the issue.

To use UberMenu with a theme that has an existing responsive menu, you need to choose whether you want to use UberMenu for your main menu only, or for your main and responsive menu.

Scenario A: Using UberMenu as your only menu (main and responsive)

In this case, your best option is to remove the entire theme menu system and replace it with UberMenu Direct.

For example, your theme likely does something like this

<div id="nav">
    <?php 
    //This order , theme_location, and classes may vary

    // this is the menu you'll see at widths greater than 960px
    wp_nav_menu( 'theme_location' => 'primary',  'container_class' => 'primary-menu' );

    // this is the menu that will be displayed on mobile devices
    wp_nav_menu( 'theme_location' => 'primary',  'container_class' => 'primary-menu-responsive', 'walker' => 'responsive_walker' ); 
    ?>
</div>

The whole thing would be replaced with

<?php
if( function_exists( 'uberMenu_direct' ) ){
  uberMenu_direct( 'primary' );
}
?>

(make sure your theme-defined theme_location, in this case `primary`, is passed to UberMenu Direct).

Scenario B: Using UberMenu as your main menu and your theme’s responsive menu

In this case, you’ll need to adjust the theme CSS to show UberMenu and its own responsive menu at the right times. This will vary from theme to theme, but will involve hiding and showing the #megaMenu div via media queries, for example:

@media only screen and (max-width: 960px){
   #megaMenu{ display: none; }
}

If necessary, the code for the theme’s menu will be specific to the theme.

In some cases, you may just need to adjust the Theme Location Instance – see If UberMenu replaces your responsive menu but not your main menu

Scenario C: Using UberMenu and Responsive Select Menu

In this case, replace the entire theme menu system as in Scenario A, then install the Responsive Select Menu plugin.

Hiding Menu Items at different screen sizes

You may wish to hide certain menu items at different viewport sizes. To do so, you could add some CSS like this and then add the appropriate class to your menu items.

The classes defined below are

um-below-960 Displays only on viewports < 960px wide um-above-960 Displays only on viewports > 960px wide

um-below-767 Displays only on viewports < 767px wide um-above-767 Displays only on viewports > 767px wide

um-below-480 Displays only on viewports < 480px wide um-above-480 Displays only on viewports > 480px wide

#megaMenu ul.megaMenu li.menu-item.um-below-960{
  display:none;	
}
#megaMenu ul.megaMenu li.menu-item.um-below-767{
  display:none;	
}
#megaMenu ul.megaMenu li.menu-item.um-below-480{
  display:none;	
}

@media only screen and (max-width: 960px){
   #megaMenu ul.megaMenu li.menu-item.um-above-960{
      display:none;	
   }
   #megaMenu ul.megaMenu li.menu-item.um-below-960{
      display: block;
   }
}
@media only screen and (max-width: 767px) {
   #megaMenu ul.megaMenu li.menu-item.um-above-767{
     display:none;	
   }
   #megaMenu ul.megaMenu li.menu-item.um-below-767{
     display:block;	
   }
}
@media only screen and (max-width: 479px){
   #megaMenu ul.megaMenu li.menu-item.um-above-480{
     display:none;	
   }
   #megaMenu ul.megaMenu li.menu-item.um-below-480{
     display:block;	
   }
}

Style Generator

Note that the Style Generator will create an entirely new skin for your menu; it will not augment existing skins.

1. Open the UberMenu Control Panel, Appearance > UberMenu
2. Open the Style Configuration panel
3. Set the Style Application to Style Generator

   

4. Open the Style Generator panel
5. Set the colors and settings for each of the options. To select a color, click the color box, select a color from the color picker, then click the box again to set the color. If you edit the color value directly, make sure you enter a valid HEX value.

   

6. Click Preview to see what your skin will look like. Refine if desired.

   

7. When you are done, click Save All Settings

Including in the site <head>

By default, the custom styles generated by the Style Generator will be loaded in the site’s <head>

Writing to a file

If you want, you can have UberMenu attempt to write a custom CSS file. In order to do so, you’ll need to have your ubermenu/standard/stylegenerator/ directory writable by the server.

To write to a file, enable Save custom CSS to file

If the file cannot be saved, you will receive a warning when saving your settings. In this case, UberMenu will automatically revert to including your custom styles in the site head.

Including elsewhere

If you would rather include your custom CSS in another file, you can still use the Style Generator, but set the Style Application to Do Nothing. Then you can view the CSS (next to the preview button) and copy it into any stylesheet you want. No skin will be included by UberMenu in this case.

Background gradients & Internet Explorer

Please note that older versions of IE do not support CSS3 gradients. Therefore in IE8 and IE9, a flat color will be displayed instead of a gradient. If you wish to use a gradient as your background, you can do so by setting a background image for those elements and using a repeating gradient image.

Custom Tweaks

Need to add just a few lines of CSS to tweak your menu? Just insert it in the textarea under Style Configuration > Custom CSS Tweaks, and it’ll automatically be added to your site <head>.

Creating a Custom Skin

1. Copy or rename custom-sample.css to custom.css in the ubermenu/custom/ directory (just like with wp-config-sample.php).
2. In Appearance > UberMenu > Style Configuration, set Style Application to Custom. (This loads the custom.css file instead of a preset file)
3. Start editing custom.css as you see fit!

The Customization Assistant can also be useful in determining selectors to target specific menu elements.

Customization Assistant

You should always back up this file before updating, just to be safe.

Don’t forget that the custom.css file won’t be loaded, and therefore won’t affect your site, unless you set your Style Application to Custom. custom.css replaces your skin, it does not augment it.

Adding Custom CSS

You can put your CSS styles in any stylesheet that makes you happy. Your choice depends on an inherent trade-off in ease vs. maintainability.

Option 1: UberMenu’s Style Configuration > Custom CSS Tweaks (Control Panel)

If you have a small amount of CSS code to add, you can place it in your site head by adding it to Appearance > UberMenu > Style Configuration > Custom CSS Tweaks

Option 2: UberMenu’s custom.css

This is the recommended solution for significant customizations. Remember, custom.css is only loaded if you have the Style Application set to Custom in the UberMenu options. You’ll need to copy your preferred preset styles into this file, and add your custom styles as well. See Creating a Custom Skin for details. This is the best place from a maintenance perspective, because when you upgrade you’ll just need to preserve the custom.css file.

Option 3: A special place where you keep custom CSS.

If you have created (or if your theme provides) a special location for custom CSS styles, this is a great place for custom UberMenu styles as well.

Note: Just keep in mind that this stylesheet is likely loaded before UberMenu’s, so if you’re trying to override existing styles you’ll need to either use more specific selectors or use the !important flag in your styles.

Option 4: Your theme’s style.css

You might already be putting your customizations in your theme’s style.css. This is fine, just make sure you keep track of them. It’s best to keep them all in one place so you can easily transfer them if you upgrade your theme. Also, see the above note regarding specificity.

Option 5: UberMenu’s preset files

NOT RECOMMENDED

This is discouraged, because it will make it difficult to upgrade. If you want to edit or add to one of these files, copy it to custom.css first as described in Option 1.

Option 6: UberMenu’s basic.css

NOT RECOMMENDED. DON’T EDIT THIS FILE.

This is a core file. It should never be edited unless you have no intention of ever upgrading UberMenu

Customization Assistant

While I can’t support individual customizations for each customer, I hope this will help you with your customizations!

Try the Customization Assistant →

Using Firebug or Chrome Developer Tools

One great tool for customizing menu styles is the use of Firebug, a Firefox plugin, or the equivalent Chrome Developer Tools for Google Chrome. These tools allow you to inspect the HTML and the CSS styles, as well as change, add or remove styles temporarily to test changes. It’s by far the best way to fully customize your menu style. You can get Firebug at getfirebug.com. Chrome Developer Tools is built in to Google Chrome and can be accessed by pressing F12.

Here are two a great videos on using Firebug. Just remember: DON’T EDIT THE CORE UBERMENU FILES. Instead, be sure to follow the UberMenu Customization Best Practices.

Adding Custom Javascript

As of UberMenu 2.3, you can turn on a custom javascript file in you UberMenu Control Panel just like with the custom CSS file. Activate it under Advanced Settings > Include Custom Javascript. This will automatically include the custom/custom.js file. Now rename custom-sample.js (found in the /custom folder) to custom.js and add your javascript to the file.

Menu Bar Height

You can change the height of the menu using CSS. There are three options below, but unless you are doing something very unique, you will almost certainly want the first solution.

Solution: Increase the height of the top level menu items

This solution is recommended for 99.9% of cases

By adjusting the top and bottom padding on the top level menu item anchors, the item content remains vertically centered and the menu bar height is naturally adjusted.

#megaMenu > ul.megaMenu > li.menu-item > a,
#megaMenu > ul.megaMenu > li.menu-item > span.um-anchoremulator{
    padding-top:20px;
    padding-bottom:20px;
}

Other ways of increasing the height

You would almost never want to use the following options unless you’re doing something unique with your menu. The solution above is recommended for almost every single case.

Increase the padding of the menu bar

#megaMenu ul.megaMenu{
    padding:20px 0px;
}

Increase the height of the menu bar

(Don’t use this on responsive sites, unless you wrap it in a media query)

#megaMenu ul.megaMenu{
    height:50px;
}

Style One or More Menu Items Differently

Please remember that customizations are not included in support. This FAQ is here to explain best practices, but you will need to implement the changes yourself

Note: in UberMenu 3 you will be able to change colors via the menu item settings without writing custom CSS. The beta is available in the forum if you’d like to check it out.

Styling an individual menu item

Just want to style a single menu item? Every item has an ID, and you can target that item by its ID. Just open up Firebug or Chrome Developer Tools and inspect the menu item in question. The ID is attached to the list item (LI). To style the menu item, use this selector template, replacing menu-item-100 with the ID of your menu item:

/* Menu Item with links */
#megaMenu ul.megaMenu li#menu-item-100 > a{
    /* place style properties here */
}

/* Menu Item with links disabled */
#megaMenu ul.megaMenu li#menu-item-100 > span.um-anchoremulator{
    /* place style properties here */
}

/* Menu Item Link on Hover */
#megaMenu ul.megaMenu > li#menu-item-100:hover > a, 
#megaMenu ul.megaMenu > li#menu-item-100 > a:hover, 
#megaMenu ul.megaMenu > li#menu-item-100.megaHover > a{
    /* place style properties here */
}

How to find a menu item ID in Chrome Developer Tools

1. Right click the menu item
2. Select Inspect Element
3. Click on the containing li within the web inspector
4. Read the ID, which looks like id="menu-item-##"

Styling a group of menu items

Via highlighting

One easy way to accomplish styling a group of menu items is to use UberMenu’s “Highlight” option for those menu items. You can customize the highlight style with this selector template:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-highlight > span.um-anchoremulator {
   color: tomato !important;
}

Via Custom Classes

Want to pick and choose which menu items have your special styling? Add a class! This is a default WordPress menu feature. Just add your special class to each menu item you need styled differently, and style that CSS class however you like.

Here are details on Adding a custom class

#megaMenu ul.megaMenu li.menu-item.mycustomclass > a, 
#megaMenu ul.megaMenu li.menu-item.mycustomclass > span.um-anchoremulator {
   color: tomato !important;
}

Styling an entire level of menu items

Want to change the way an entire level of menu items looks, like the whole top level, or all submenu headers? You can get all the style selector templates you need by using the UberMenu Customization Assistant

Styling a specific Submenu

You can target a specific submenu with the same technique. Just find the ID of the parent menu item in the top level, then use this selector format:

#megaMenu ul.megaMenu > li#menu-item-100 > ul.sub-menu{
   background:tomato;
}

You can use the class technique as well.

Customizing Colors

There are a few way to make your customizations in UberMenu.

Style Generator

If you want to create a fully custom skin without writing any CSS, you should use the Style Generator.

Please note that the Style Generator will build an entire skin for you, it won’t override colors from existing skins.

Custom CSS

If you want to tweak an existing skin’s colors, you can write a bit of custom CSS to do what you want.

Which color?

There are generally 3 types of colors in the menu, which are controlled by 3 distinct CSS properties. Note that I am using built in CSS colors as examples, but generally you’d use a hex value like this #000000.

Background Color

Generally you would want to change the background color on either the menu bar or the submenu. The CSS property for this is

background: black;

Text Color

You can change the font color of the links in each level of the menu. The CSS property for this is

color: green;

Border Color

You may also wish to change the border color on the menu bar, top level menu item dividers, submenu, or second level header underline. The CSS property for this is

border-color: tomato;

Which Element?

To target a specific group of element in the menu (for example, top level menu items), you need to use the proper selector. The selectors can be found in the UberMenu Customization Assistant. (To target a more specific set or single element, see How to Style One or More Menu Items Differently)

Example 1: Top Level Links Color

For example, to change the color of the top level links to blue, we would grab the proper selector from the customization assistant

/* Top Level Items */
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {

}

Then set the properties that we want to change, in this case color.

/* Top Level Items */
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
  color:blue;
}

Please note that some skins, for example those from skin extension packs, will require a more specific selector to be overridden. For example:

#megaMenu.wpmega-preset-flat-blue  ul.megaMenu > li.menu-item > a, 
#megaMenu.wpmega-preset-flat-blue  ul.megaMenu > li.menu-item > span.um-anchoremulator {
  color:blue;
}

Example 2: Submenu Background Color

Again, we get the selector from the Customizer

/* Sub Menu Container Style */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1{
  
}

Then use the background property

/* Sub Menu Container Style */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1{
  background:red;
}

Where to add the code?

Now that we have the code written, we just need to apply it to the site. You should never edit the existing skin files. For full details on how to add your custom code, please see Adding Custom CSS.

Vertical Spacing / Using the menu with only second level menu items in the submenu

UberMenu is designed to be used with 3 level of menu items. Second level menu items are headers, while third level menu items align vertically beneath those headers. Sometimes users have only the need for two levels. In that case, the vertical spacing of the second level menu items seems excessive, as there are no third level menu items to pad.

Adding this CSS to your custom styles will space the second level menu items more appropriately

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1{
  padding-top:10px;
  padding-bottom:10px;  
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item{
  padding-top:0;  
  padding-bottom:0;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item:hover > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu li.menu-item > a:hover{
  border-bottom:none;
  padding-bottom:0;
  margin-bottom:0;
}

Full Width (Justified) Top Level Menu Items

If you want to make your menu items expand the full width of the menu bar, you can do so with some custom CSS. Basically, we’ll just set each top level menu item to be the same percentage of the bar.

Before:

After:

Once you know your total number of top level menu items, just divide 100 by that number to get the proper percentage:

So, for a menu with 5 top level menu items, we’d use this CSS:

#megaMenu ul.megaMenu > li.menu-item{
	width:20%;
	text-align:center;
}

See also Adding Custom CSS

Using Percentages

As you’ll notice, for numbers of menu items that don’t divide evenly into 100, there will be left over percentages (for example, with 3 menu items × 33%, your menu items will fill 99% of the menu bar, leaving 1% at the end of the menu bar). Generally this is not noticeable. It is recommended that you round down to the nearest whole percent as different browsers use different rules to round percentages, and if you end up off by a pixel due to browser rounding, your last menu item will appear on the next line. That is, rather than 33.3333%, we use 33%, and rather than 16.666% we use 16%. While some browsers handle conversions from percentages to pixels intelligently, others do not. Remember, you can’t have a fraction of a pixel.

Text fit

Normally, UberMenu’s menu items size naturally to their contents. That is, if you have an item with a long label like “Contact us for special deals”, this will all appear on one line and you’ll have a wide menu item.

Once you make all your menu items the same size, this may force some of your longer text items to wrap. While the menu will still function perfectly, it may not look as nice.

All items 16%

If you really want to hone your menu, you can assign a different width to each menu item so that they add up to 100% – they don’t all have to be a constant width. For example, if your second menu item is too long and you want your 5 items to expand full width, you might use a distribution of 15,40,15,15,15 instead of 20,20,20,20,20. Essentially taking 5% from each of the other 4 items and giving it to the second item. Here is how you can target individual menu items.

Each item’s width tweaked manually for better fit:

Other Notes

Please note that these changes are customizations, and there are a variety of situation-specific issues you may encounter which you will need to resolve with custom CSS. Here are a few tips to point you in the right direction:

Image position

If you are using an image and want it to appear centered with the text rather than at the edge of the menu item, you can try something like this

#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-with-img img{
	display:inline;
	float:none;
	vertical-align:top;
}
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-with-img span.wpmega-link-title{
	display:inline;
	padding-left:10px;
}

Submenu Indicator Arrow Position

It won’t be possible to move the arrows closer to the text in a flexible way. You could change their `right` position value, but this may change if your site width adjusts with the viewport (is responsive), so that is not a general solution. You could move the submenu indicator from the anchor to the span.wpmega-link-title element instead to achieve this effect, but that customization is outside of the scope of this tutorial or product support.

Current Menu Item Highlighting

UberMenu implements all of the standard current menu item classes, so you can target and adjust those properties via custom CSS . You can inspect the top level list items for each page using Firebug to see what is available to you at any given time.

Based on menu hierarchy

These are the standard class options available based on the menu hierarchy:

.current-menu-item
.current-menu-parent
.current-menu-ancestor

Current Menu Item

To highlight the current menu item red (regardless of level), you could use this style, for example:

#megaMenu ul.megaMenu li.menu-item.current-menu-item > a,
#megaMenu ul.megaMenu li.menu-item.current-menu-item > span.um-anchoremulator{
   color:red;
   background-color:blue;
}

Depending on where you put your code, you may need to employ the !important flag.

Ancestor of current menu item

To highlight the top level item when either that item or a submenu item is selected, use

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-item > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-parent > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-parent > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-ancestor > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-ancestor > span.um-anchoremulator{
   color: red;
   background-color:blue;
}

Based on Page Hierarchy

These are the classes available, and would be used in the same way as above:

.current-page-parent
.current-page-ancestor

For example:

#megaMenu ul.megaMenu li.menu-item.current-page-ancestor > a,
#megaMenu ul.megaMenu li.menu-item.current-page-ancestor > span.um-anchoremulator{
   color:red;
   background-color:blue;
}

The same structure works with other hierarchical custom post types, e.g. `current-{custom-post-type}-ancestor`.

More Information

Font

Font Family

By default, the menu will inherit the font from your theme. You can change the font via custom CSS:

#megaMenu, 
#megaMenu ul.megaMenu,
#megaMenu ul.megaMenu li.menu-item, 
#megaMenu ul.megaMenu li.menu-item a, 
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator, 
#megaMenu ul.megaMenu li.menu-item .widget, 
#megaMenu ul.megaMenu li.menu-item p{
    font-family: Helvetica, Arial, sans-serif;
}

Font Size

To change the font size, grab one of the selectors from the customizer and set the font-size property. For the top level:

/* Top Level Items */
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
  font-size: 12px;
}

Font Uppercase/lowercase

To change the font to uppercase or lowercase, you use the text-transform CSS property

/* Set top level transform to 'none' or 'uppercase' */
#megaMenu ul.megaMenu > li.menu-item > a span.wpmega-link-title, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator span.wpmega-link-title{
  text-transform:none;	/* uppercase */
}

Font Weight

#megaMenu ul.megaMenu li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item > span.um-anchoremulator{
  font-weight:normal;
}

Or target a specific level with the Customization Assistant

Style Generator

If you are using the Style Generator, you can set the font size via the settings in the Style Generator options panel. But keep in mind that these styles only apply if you have set your Style Application to Style Generator; they will not augment a preset.

Skins Pack

Note if you are using a skins pack, you may need to further qualify your CSS selector to apply your style, for example:

#megaMenu.wpmega-preset-flat-blue ul.megaMenu > li.menu-item > a, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu > li.menu-item > span.um-anchoremulator {
  font-size: 14px;
}
#megaMenu.wpmega-preset-flat-blue, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu,
#megaMenu.wpmega-preset-flat-blue ul.megaMenu li.menu-item, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu li.menu-item a, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu li.menu-item span.um-anchoremulator, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu li.menu-item a span, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu li.menu-item span.um-anchoremulator span, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu li.menu-item .widget, 
#megaMenu.wpmega-preset-flat-blue ul.megaMenu li.menu-item p{
    font-family: Georgia, serif;
}

Transparency

You may wish to add a bit of transparency to the submenus or your menu bar. There are a couple of ways to do this, but I think rgba() colors are the best option.

Option 1: Opacity

CSS has a built in opacity property that can be added to any element. So it’s very easy to do this:

/* Submenus */
#megaMenu ul.sub-menu-1{
  opacity:.8;
}

/* Menu Bar */
#megaMenu{
  opacity:.8;
}

However, the way opacity works is that it affects all parts of the item (background, text, images, borders, etc), as well as all descendants of that element. Opacities also compound. This generally makes links hard to read, so it’s not optimal.

Option 2: rgba() background

A better solution is to use rgba() colors for the background. rgba() allows you to set an alpha value for your color, which is just like an opacity value, but only affects that color. So the solution is:

/* Sub menus */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu{
  background: rgba( 0,0,0, .8);
}

/* Menu Bar */
#megaMenu{
  background: rgba( 0,0,0, .8);
}

This solution gives an 80% opacity black background, but the images and text will remain fully opaque for easier reading. Most color pickers will give you rgb values, and then you can add your own alpha value.

Note that rgba() colors don’t work on IE8. I think just setting a solid background fallback is the best solution (I don’t recommend using IE filters, as they can be problematic), but you can use a transparent png repeated background if you prefer.

Changing the width of a widget area

Widget areas take up the entire width of a submenu by default. This is because the widgets inside the widget area form the columns, and a single menu item contains one widget area, which contains multiple widgets. This is explained in the Widgets section, and you can see a visualization in the Customization Assistant by clicking the “Uber” tab.

If you wish to have a widget area share a row with normal menu items, you’ll need to make some CSS customizations to make them act like normal widget items. Essentially, this means floating the item left, adjusting its width, and removing the clear.

To adjust the width of the widget area, you can target it directly

/* The ID will be specific to your menu */
#megaMenu #menu-item-XX{
  width:300px;	/* Change as desired, set to a percentage if using full-width, or set to auto */
  float:left;
  clear:none;
  padding:11px 27px;    
}

Don’t forget to consider what will occur at responsive sizes if you set an explicit width

Note that if you want to add more than one widget to this widget area, you may get unpredictable results (because the widget area is told to “size automatically”, while the widgets are told to “size to the parent container”. This is essentially a circular reference, and the result is unpredictable). Setting an explicit width (instead of ‘auto’) resolves the issue.

Styling the Mobile Close (×) button

The black square that shows up on mobile devices allowing to close the menu on touchscreens can be styles with the selectors below. I recommend only changing colors/fonts.

#megaMenu ul.megaMenu li.menu-item a span.uber-close,
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close{
    top:0;
    right:0;
    background:#999;
    background:rgba( 0, 0, 0, .9 );
    font-size:20px;
    font-weight:bold;
    color:#f5f5f5;
}

Styling the open and closed states

/* Style the "x" */
#megaMenu ul.megaMenu li.menu-item a span.uber-close[data-uber-status="open"],
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close[data-uber-status="open"]{
  background:red;	
}
/* Style the down arrow */
#megaMenu ul.megaMenu li.menu-item a span.uber-close[data-uber-status="closed"],
#megaMenu ul.megaMenu li.menu-item span.um-anchoremulator span.uber-close[data-uber-status="closed"]{
  background:blue;	
}

How can I change the responsive breakpoints (advanced)?

UberMenu 3 supports Custom Breakpoints. Please consider updating to UberMenu 3 (don’t forget to read the migration guide!) if you would like to change your breakpoint.

Please note that this is a general overview/guide for advanced users who want to customize their responsive break points; UberMenu 2 does not support breakpoint adjustments out of the box

Out of the box, UberMenu responsive breakpoints are fixed at the de facto standards of 960, 767, and 480 pixels, as described here: UberMenu Responsiveness

These breakpoints are built into the basic.css, as making these values configurable would require printing a large amount of CSS in the site head.

Therefore, adjusting these breakpoints requires altering the basic.css. As you know from the Customizing UberMenu section of the guide, you should never edit any UberMenu core files. Therefore the strategy to alter these breakpoints will be to:

1. Disable the default basic.css in the UberMenu Control Panel > Advanced Settings
2. Include a customized version of basic.css in your custom.css file

Since we’re playing with the core styles, any time you update UberMenu you’re going to have to do a little extra maintenance to maintain your customizations. There’s an low maintenance way and high maintenance way to do this. We’ll cover the high maintenance strategy first.

High Maintenance Route – Edit basic.css

Of course, we can always just edit the CSS files directly. Copy the basic.css and your skin preset into your custom.css. Edit the media queries in basic.css to your desired breakpoints. Switch your Style Application to Custom and you’re good to go!

The problem with this method is that when there is an update and basic.css changes, you’re going to need to update your customized basic.css manually.

Low Maintenance Route – LESS

Please note that you should be familiar with LESS to use this section; if not, you can always just customize the CSS files as usual rather than use LESS. There are lots of great resources around the internet on how to use LESS if you’d like to learn it – details on installing and using LESS are outside the scope of this document or support. Here’s a nice Intro to LESS if you are unfamiliar.

This takes a bit more skill to set up, but is worth the effort.

UberMenu’s basic.css is split up into several LESS files that are shipped with UberMenu. basic.less imports these individual LESS files and is compiled into basic.css

What we’re basically going to do is set up our own basic.less from which we can automatically rebuild the basic.css – including our own customizations – in an instant after each update.

Here are the steps:

1. Create a custom.less file in the ubermenu/custom directory. This file will be our source for building our custom.css.

2. Set the contents of the custom.less file like the basic.less file, but adjust the import statements to be relative to the custom directory. The contents should look like this:

@import "../core/styles/less/core.less";
@import "../core/styles/less/arrows.less";
@import "../core/styles/less/divider.less";


@import "../standard/styles/less/images.less";
@import "../standard/styles/less/vertical.less";
@import "../standard/styles/less/centering.less";
@import "../standard/styles/less/searchbar.less";
@import "../standard/styles/less/recent-posts.less";
@import "../standard/styles/less/contact-form-7.less";


@import "../core/styles/less/clearfix.less";
@import "../core/styles/less/responsive.less";

(If you were to run a LESS build right now, you’d get the contents of basics.css in your custom/custom.css file).

As of UberMenu v2.3.2, a custom/custom-sample.less is included, which you can simply rename to custom.less

3. Also add your skin as an import (at the end of the list). This may be a preset or a style generator skin (skin.css). You can also add your custom CSS styles below the imports in the custom.less if you like.

//you would add one of these three lines
@import "../core/styles/skins/blackwhite.css";  //example for Black & White skin
@import "../standard/styles/skins/shinyblack.css";  //example for Shiny Black skin
@import "../standard/stylegenerator/skin.css"; // example for Style Generator

4. Adjust the custom/less/config.less breakpoints as you require.

5. Change the custom.less file to import your new custom/less/config.less file, (this already exists in the sample file in v2.3.2).

@import "less/config.less";

6. Compile/build your custom.css file from the custom.less (you’ll need to have a less compiler installed – that is outside the scope of this documentation).

7. In the UberMenu Control Panel > Style Configuration, switch your Style Application to custom to pick up your new custom stylesheet. Don’t forget to disable basic.css as well in the UberMenu Control Panel > Advanced Settings.

8. When a new release of UberMenu comes out, just rebuild your custom.css, and the contents will automatically be pulled from the updated files. (This is important!!)

Enjoy!

Video Walkthrough

Below is the custom.css file generated in this video. You can copy and paste your preferred skin at the end of it and then drop it in your /custom directory.

custom.css

Events

ubermenuopen

Fires upon completion of a submenu show animation.

Example (jQuery 1.7+)

//See ubermenu.dev.js for full example
var $li = $u( 'li.ss-nav-menu-item-depth-0' );
var mapHandler = function(){
    google.maps.event.trigger(map, "resize");
    map.setCenter(latlng);
    //Only resize the first time we open
    $li.off( 'ubermenuopen', mapHandler );
}           
$li.on( 'ubermenuopen', mapHandler );

Example (jQuery 1.6)

//See ubermenu.dev.js for full example
var $li = $u( 'li.ss-nav-menu-item-depth-0' );
var mapHandler = function(){
    google.maps.event.trigger(map, "resize");
    map.setCenter(latlng);
    //Only resize the first time we open
    $li.unbind( 'ubermenuopen', mapHandler );
}           
$li.bind( 'ubermenuopen', mapHandler );

ubermenuclose

Fires upon completion of a submenu hide animation.

Functions

Pass the top level menu item ID selector (e.g. ‘#menu-item-15’) to control the submenus.

uberMenu_openMega( id )

Opens a mega submenu

Example

jQuery(document).ready( function($){
     
    //open the menu when clicking on a special button
    $('#my_special_button').click( function(){
        uberMenu_openMega('#menu-item-15');
    });
     
});

uberMenu_openFlyout( id )

Opens a flyout menu

uberMenu_close( id )

Closes a submenu

Javascript API Examples

These are example functions for using the UberMenu API; using such code is considered a customization and is outside the scope of support

Adding Custom Javascript

Open a specific submenu based on an external event

In this example we open the submenu of menu item #15 when clicking on a special button with the id ‘my_special_button’

jQuery(document).ready( function($){
      
    $('#my_special_button').click( function(){
        uberMenu_openMega('#menu-item-15');
    });
      
});

Open the current menu item’s submenu on page load

This function will open the submenu of the current menu item

jQuery( 'document' ).ready( function($){
  var id = $( '#megaMenu ul.megaMenu > li.current-menu-item, #megaMenu ul.megaMenu > li.current-menu-parent, #megaMenu ul.megaMenu > li.current-menu-ancestor' ).first().attr( 'id' );
  if( id ) uberMenu_openMega( '#' + id );
});

Turn a single menu item from a hover to a click trigger

In this example we’ll turn menu item #21 into a click instead of hover menu item.

jQuery( 'document' ).ready( function( $ ){
	var id = '#menu-item-21';
	$( id + ' > a' )
		.hover( function(){
			return false;
		})
		.click( function(e){
			e.preventDefault();
			if( $( this ).parent( 'li' ).hasClass( 'megaHover' ) ){
				uberMenu_close( id );
			}
			else{
				uberMenu_openFlyout( id );
			}			
		});
});

Genesis (StudioPress)

Are you using UberMenu 3? Be sure to check out the Updated Genesis Integration Guide

As there are many Genesis child themes, this solution may vary among them. However, this technique is known to work with the default Genesis theme as of version 1.7. Similar strategies should work with alternate child themes, though specifics may vary with your child theme.

Update: In some versions of Genesis (either newer or with different child themes, you may not experience residual styling, but you may have a layering issue which is resolved by

.nav-primary{
	position:relative;
	z-index:20;
}
.site-inner{
	position:relative;
	z-index:10;
}

If submenus don’t open or the styling doesn’t look right

There are two issues when integrating with Genesis:

1. The submenus may be hidden. This is due to an overflow:hidden; on the #nav div
2. The submenus will not be styled properly out of the box. This is due to residual styling.

Both issues are resolved easily by changing the ID of the #nav div or removing the container entirely. Of course, we don’t want to edit the Genesis core directly, so we just use the Genesis filter system to update the menu display (add this code to your child theme’s functions.php file):

Primary Navigation Menu

/* Child Theme's functions.php */
add_filter( 'genesis_do_nav', 'genesis_child_nav', 10, 3 );
function genesis_child_nav($nav_output, $nav, $args){
    return $nav;
}

To accomplish the same thing with the submenu instead, you just need to change the filter (use this code instead of the above code):

Secondary (sub) navigation menu

add_filter( 'genesis_do_subnav', 'genesis_child_nav', 10, 3 );
function genesis_child_nav($nav_output, $nav, $args){
    return $nav;
}

Recentering the menu within the content area

You may also need to center your menu afterwards, depending on your child theme. You can do so either through the UberMenu Control Panel > Advanced Settings (don’t forget to Enable Clearfix as well as Center Menu Bar), or via custom CSS:

/* UberMenu Centering */
#megaMenu{
  max-width:100% !important;
  width:960px !important;
  margin:0 auto;
  float:none !important;
}
#megaMenu ul.megaMenu{
  float:none !important;
}
#megaMenu ul.megaMenu:before,
#megaMenu ul.megaMenu:after {
  content: "";
  display: table;
}
#megaMenu ul.megaMenu:after {
  clear: both;
}

Headway 3.0+

Are you using UberMenu 3? Be sure to check out the Updated Headway Integration Guide

Headway 3.0 makes things much easier than with Headway 2.x. The new system uses WordPress 3 menus properly, so that’s great. However, since the Headway menu CSS is coded relative to the navigation block, rather than the wp_nav_menu container, we end up with residual styling which interferes with UberMenu. That means the easiest solution is to use UberMenu Easy Integration, and the Headway block system makes that possible without editing any core files. Here’s what you need to do:

In a nutshell: we will replace the Headway navigation block entirely with a custom code block containing UberMenu Easy Integation.

1. Activate UberMenu Easy Integration via Appearance > UberMenu > Theme Integration > Easy Integration
   
2. Activate Strict Mode via Appearance > UberMenu > Theme Integration > Strict Mode
3. In Appearance > Menus, Activate the UberMenu Theme Location by checking the Uber Menu checkbox in the Activate Uber Menu Locations meta box and clicking Save
4. Set your desired menu in the “UberMenu” menu theme location in the Theme Locations meta box and click Save
5. In the Headway visual editor, add a Custom Code block to the layout (not a navigation block).
   
   Then switch to the Design Panel and set the easy integration code in the block like this:

   <?php uberMenu_easyIntegrate(); ?>

   (Right click block > Open Block Options > Click Content > Paste in Editor)
   

6. The submenus are hidden at this point in the process, because there is an overflow:hidden; on the block applied by Headway. So we need to add special code to override that – remember that you need to change the ID to that of your custom block:

   /* Replace 11 with the ID of your custom block */
   #block-11{
   overflow:visible;
   }
   

   Where block-11 is the ID of the custom block. You can place the style in Headway’s Live CSS Editor (or see Adding Custom CSS).

7. That’s it!

Avada (ThemeFusion)

Are you using UberMenu 3? Please see the UberMenu 3 Avada Integration Instructions

Avada 3.x

In Avada 3, the UberMenu option still appears in Appearance > Theme Options > Extra Options > Enable or Disable Support for Plugins Installed Manually > UberMenu Plugin Support, it is just located slightly further down in the settings

Avada 2.1.1

ThemeFusion added UberMenu support into Avada in version 2.1.1 of the theme. It can be activated in the Avada Theme Options Panel.

Enfold (Kriesi)

Are you using UberMenu 3? Be sure to check out the Updated Enfold Integration Guide

The latest version of Enfold makes integrating UberMenu and Enfold a simpler process. It is recommended that if you have used the old integration guide, that you remove those styles and use the strategy recommended here instead

For the most part, UberMenu and Enfold work together very well out of the box. There are a few CSS tweaks we can add that will make them play even more nicely together.

Since Enfold has a few different menu settings that you can mix and match, but the changes in the newest version make styling the menu in keeping with Enfold’s features simpler than in previous versions.

Note that Enfold contains a custom/custom.css file, so that is a good place to add any custom CSS.

Note for users intending to use the built-in Enfold search button, disable the Reset Div & Span Styling option in the UberMenu Control Panel > Theme Integration.

Here’s the result of this guide:

Recommended Skin

The recommended skin for Enfold is Vanilla. Any of the skins will function, and you can always use the Style Generator or write your own skin; but Vanilla looks the closest to Enfold’s menu out of the box.

Recommended Styles

Enfold offers a variety of header options, and the following styles are provided to account for each of these options.

Remember to set the image width to your preferred size.

/* Set the width of the menu images */
#megaMenu .ss-nav-menu-with-img img{
  width:16px;
}

/* Menu left or right, slim */
.av_main_nav_header #megaMenu ul.megaMenu > li.menu-item > a, 
.av_main_nav_header #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:36px;
  padding-bottom:36px;
}

/* Menu left or right, large */
.av_main_nav_header.av_large #megaMenu ul.megaMenu > li.menu-item > a, 
.av_main_nav_header.av_large #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:50px;
  padding-bottom:50px;
}

/* Menu left or right, scrolled */
.av_main_nav_header.header-scrolled #megaMenu ul.megaMenu > li.menu-item > a, 
.av_main_nav_header.header-scrolled #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:14px;
  padding-bottom:14px;
}

/* Responsive Menu */
@media only screen and (max-width: 767px) {
	#megaMenu ul.megaMenu li.menu-item > a,
	#megaMenu ul.megaMenu li.menu-item > span.um-anchoremulator{
		padding-top:15px !important;
		padding-bottom:15px !important;
	}
}

Widgets

If you are using widgets in your menu, you may need to add this CSS:

#megaMenu ul.um-sidebar{
    height:auto !important;
}
#megaMenu ul.megaMenu li.ss-nav-menu-mega ul.sub-menu ul{
    background:transparent;
}

Mobile Menu

By default, Enfold will hide UberMenu and display the default Enfold mobile menu on mobile devices. You have several options if you don’t want to use the Enfold mobile menu:

Option 1: Use UberMenu, hide Enfold menu

To force UberMenu to display and hide Enfold’s mobile menu, you can add this CSS:

#header_main_alternate,
.main_menu,
.main_menu #megaMenu{
    display:block !important;
}
#advanced_menu_toggle,
#mobile-advanced{
	display:none !important;
}

This is the simplest solution, though optimally you would prevent Enfold from creating its mobile menu entirely. However, that would require editing the theme’s avia.js file to remove the avia_responsive_menu() function call. Ideally, Enfold would offer an option to disable the responsive menu for situations like this so we don’t expend the extra JS cycles on constructing a menu that won’t be used.

Option 2: Use ShiftNav

Another option would be to install ShiftNav, which would allow you to hide the theme’s responsive menu through the control panel by setting the selector to #advanced_menu_toggle, #mobile-advanced

Kallyas (Hogash)

Are you using UberMenu 3? Please see the UberMenu 3 Kallyas Integration GUide

Kallyas, by Hogash, is a very powerful and popular theme. I have found it integrates with UberMenu pretty well out of the box, but some things can go wrong at responsive sizes, partially because some of the header dimensions are set explicitly rather than left flexible.

Using UberMenu as your responsive menu

First, if you want to use UberMenu for your responsive menu, be sure to set the Kallyas menu to Drop Down

If you use the Smooth Menu option, you will have both menus display.

I would also suggest adding

@media (max-width: 767px){
  #header nav#main_menu {
	margin:0;
	clear:both;
	float:none;	
  }
}

So that your UberMenu will automatically clear the header when at responsive sizes.

Using UberMenu full-width

By default, UberMenu will be floated right by the theme. If you’d rather have it the full width of your content area, you can add this

header#header{
	height:auto
}
#header nav#main_menu{
	float:none;
	clear:both;
	padding-top:20px;
	margin:0;
}
#page_wrapper #page_header .container{
	padding-top:160px;
}

Using UberMenu floated right

If you are using UberMenu floated right, I’d suggest using this code, which will turn the menu full-width below 1200px (you can adjust that value), so that the menu won’t overlap with other elements in your header. Whether or not you need this, and the most appropriate width, will depend on your site and the number of menu items you have

@media only screen and (max-width: 1200px) {
	header#header{
		height:auto
	}
	#header nav#main_menu{
		float:none;
		clear:both;
		padding-top:20px;
		margin:0;
	}
	#page_wrapper #page_header .container{
		padding-top:160px;
	}
}

Make the search button fit better

Buttons outside of the actual menu are tough to control, but you can resize the magnifying glass button in Kallyas to better size with UberMenu like this (good if you’re leaving the menu floated right).

#search .searchBtn{
	margin:0;
	padding:12px 12px 13px 12px;
}

You may want to change the padding based on your skin.

Salient (ThemeNectar)

Are you using UberMenu 3? Be sure to check out the Updated Salient Integration Guide

Salient’s menu system causes some residual styling issues because of the way it is coded. This guide will help you eliminate those issues and integrate UberMenu, as well as emulate some of the Salient menu styles. (Last revision: Salient v4.0.2)

Here’s the final result:

(Child theme available at the end)

Removing Residual Styling (Critical)

Salient’s wp_nav_menu function is wrapped in a static nav and ul elements, rather than using the standard container and items_wrap parameters. Therefore when UberMenu is activated it is wrapped in an extra ul and everything appears broken.

Here is the relevant code in Salient’s header.php

					<a href="#" id="toggle-nav"><i class="icon-reorder"></i></a>
					
					<?php if (!empty($options['enable-cart']) && $options['enable-cart'] == '1') { 
						if ($woocommerce) { ?> 
							<!--mobile cart link-->
							<a id="mobile-cart-link" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><i class="icon-salient-cart"></i></a>
						<?php } 
					} ?>
					
					<nav>
						<ul class="sf-menu">	
							<?php 
							if(has_nav_menu('top_nav')) {
							    wp_nav_menu( array('walker' => new Nectar_Arrow_Walker_Nav_Menu, 'theme_location' => 'top_nav', 'container' => '', 'items_wrap' => '%3$s' ) ); 
							}
							else {
								echo '<li><a href="">No menu assigned!</a></li>';
							}
							?>
							<li id="search-btn"><div><a href=""><span class="icon-salient-search" aria-hidden="true"></span></a></div></li>
						</ul>
					</nav>

We need to change it to simply

<?php 
if(has_nav_menu('top_nav')) {
    wp_nav_menu( array( 'theme_location' => 'top_nav' ) ); 
}
else {
    echo 'No menu assigned!';
}
?>

(You can leave in the WooCommerce cart code if you wish)

Then we add some CSS. The first bit is to overcome Salient’s image resizing (which prevents the UberMenu images from displaying properly – be sure to change this to the appropriate width). The second bit makes the UberMenu taller so that it fits in the header better

#megaMenu li.menu-item > * > img{
	width:16px; /* Necessary if you are resizing images */
}
#megaMenu{
	margin-top:-16px;
}
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
	padding-top:20px;
	padding-bottom:20px;
}

Remove mobile menu

Then we need to remove the mobile menu:

<div id="mobile-menu">
	
	<div class="container">
		<ul>
			<?php 
				if(has_nav_menu('top_nav')) {
					
				    wp_nav_menu( array('theme_location' => 'top_nav', 'menu' => 'Top Navigation Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
					echo '<li id="mobile-search">  
					<form action="'.home_url().'" method="GET">
			      		<input type="text" name="s" value="" placeholder="'.__('Search..', NECTAR_THEME_NAME) .'" />
					</form> 
					</li>';
				}
				else {
					echo '<li><a href="">No menu assigned!</a></li>';
				}
			?>		
		</ul>
	</div>
	
</div>

and the toggle button

<a href="#" id="toggle-nav"><i class="icon-reorder"></i></a>

Emulating Salient Styles (Recommended)

Menu Styling Basics

1. Set your Header Padding to 16 in the Salient Header Settings

2. Disable “Resize Header on Scroll” in the Salient Header Settings

3. Use the Vanilla UberMenu Skin for the best match with Salient’s header styles.

Align your menu items to the right

To align your menu items to the right, add

#megaMenu.megaMenuHorizontal ul.megaMenu{
    text-align:right;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item{
    float:none;
    vertical-align:top;
}

Switch the submenu indicators

If you want to use the submenu indicators provided by Salient, add this CSS:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after{
  content:"\f107";
  font-family:'FontAwesome';
  border:none;
  font-size:inherit;
  color:#222;
  margin-top:-9px;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after{
  content:"\f105";
  right:10px;
}

Adding the Salient Search

Enable Content Overrides, create a custom menu item, disable link and text, and add the following markup to the Content Override.

<div id="search-btn"><a class="search-btn"><span class="icon-salient-search" aria-hidden="true"></span></a></div>

Add this CSS to make the icon visible:

#megaMenu #search-btn{
    padding:10px 0;	
}
#megaMenu .icon-salient-search{
    color:#000;
}

Child Theme

Here’s a child theme that will do all of this for you

After installing and activating the child theme, don’t forget to re-assign the menu to the Top Navigation Menu theme location and activate this theme location as an UberMenu

Download Child Theme

Thesis (DIYThemes)

Thesis 2.0 doesn’t support theme locations, so we’ll need to install a custom Box in order to use UberMenu

Download Custom Box

1. Download and install box
2. Drag UberMenu box into your Thesis layout in the Skin Editor. Remove your old menu. Save Template.
3. Go to Appearance > Menus and activate the UberMenu Thesis theme location (in UberMenu 3, this is done in the UberMenu Control Panel > Main UberMenu Configuration > Automatic Integration)
4. Go to Appearance > Menus > Theme Locations tab and assign a menu to the UberMenu Thesis theme location

Video Tutorial

Canvas (WooThemes)

Are you using UberMenu 3? Be sure to check out the UberMenu 3 Canvas Integration Guide

WooThemes has made some changes to Canvas in version 5.2.3. Since Canvas has an excellent hook system, we can swap out Woo’s nav menu for UberMenu with a few lines of PHP.

Canvas seems to integrate with minimal conflicts out of the box, but these instructions will clean up the navigation so they are recommended for all Canvas 5.2.3+ users. These instructions are especially important for users of the Sticky Extension; out of the box, Canvas’ residual styling breaks the sticky functionality.

Please note that these instructions apply to Canvas’s Primary Menu and not the Top Menu

Requirements

1. Canvas 5.2.3+
2. UberMenu 2.3+

Objectives

1. Replace WooThemes Primary navigation menu with UberMenu to remove residual styling
2. Remove WooTheme responsive navigation toggle button

Steps

Skip to solution

The optimal place to add the following PHP code snippets is in the functions.php file of a Canvas child theme. The final step includes all code in a single chunk that can be copied and pasted.

1. Replace Woo Nav with UberMenu

To do this we just need to swap out the function for the nav menu and define our own function to insert UberMenu instead. At the end, we’ll do this within the init action hook to ensure that the woo action is already added so we can remove it.

remove_action( 'woo_header_after','woo_nav', 10 );	// Remove Woo Nav
add_action( 'woo_header_after','uberMenu_direct_woo', 10 , 0 );	  // Add UberMenu
function uberMenu_direct_woo(){
	uberMenu_direct( 'primary-menu' );  //Actually do UberMenu insertion
}

2. Remove WooThemes Responsive Navigation toggle button

The WooThemes toggle button isn’t part of the normal menu (it’s actually in the header), so we need to remove that element separately.

remove_action( 'woo_header_inside', 'woo_nav_toggle', 20 );  // remove Woo Nav toggle

3. Apply styles

Since we’ve removed the Woo nav classes to eliminate residual styling, we’ll need to add in a few styles to recreate the positioning/structure surrounding the menu. If you’re using a child theme as you should be, it makes sense to place these styles in the child theme’s style.css, but there are a variety of places to include custom CSS

#megaMenu{
  margin-bottom:3em;
}
#content{
  clear:both;
}

If you run into a z-index issue you can also add this code:

#megaMenu-sticky-wrapper,
#megaMenu{
  position:relative;
  z-index:20;    
}
#content{
  position:relative;
  z-index:10;    
}

4. Complete Solution: Putting it all together

To integrate UberMenu, you just need to copy two blocks of code into your child theme. We’ve wrapped the action functions inside a function that will be called at the init action hook in order to ensure these functions are called after Woo’s functions, which is critical.

Place this code in your functions.php

function uberMenu_canvas_comaptible(){
	remove_action( 'woo_header_after','woo_nav', 10 );	
	remove_action( 'woo_header_inside', 'woo_nav_toggle', 20 );
	remove_action( 'woo_header_before', 'woo_nav_toggle', 20 );
	add_action( 'woo_header_after','uberMenu_direct_woo', 10 , 0 );	
}
function uberMenu_direct_woo(){
	uberMenu_direct( 'primary-menu' );
}
add_action( 'init' , 'uberMenu_canvas_comaptible' );

Place this code in your child theme's style.css or UberMenu CSS Tweaks

#megaMenu{
  margin-bottom:3em;
}
#content{
  clear:both;
}

/* If you run into a z-index issue */
#megaMenu-sticky-wrapper,
#megaMenu{
  position:relative;
  z-index:20;    
}
#content{
  position:relative;
  z-index:10;    
}

Full Width Layout

Note: if you are using the Full-Width Layout, you will want to center the menu bar

In this case you may wish to set the Menu Bar Width to 980px and add

#content{
  margin-top:30px;
}

to your CSS

Mingle / Salutation (Parallelus)

Instructions for Mingle 1.7+

Parallelus has updated Mingle to integrate with UberMenu more smoothly now – awesome!

Now we just have to change one thing in design-header.php, lines 49-54 you’ll find this code:

<?php if ($theHeader['menu_left']) { ?>
	<div id="MM" class="slideMenu">
		<?php wp_nav_menu( array( 'container' => false, 'fallback_cb' => 'no_menu_set', 'theme_location' => 'MainMenuLeft' ) ); ?>
		<div style="clear:left"></div>
	</div>
<?php } ?>

Replace the content within the if statement with just

<?php wp_nav_menu( array( 'container' => 'div', 'container_id' => 'MM', 'container_class' => 'slideMenu', 'fallback_cb' => 'no_menu_set', 'theme_location' => 'MainMenuLeft' ) ); ?>

so that your end result is

<?php if ($theHeader['menu_left']) { ?>
	<?php wp_nav_menu( array( 'container' => 'div', 'container_id' => 'MM', 'container_class' => 'slideMenu', 'fallback_cb' => 'no_menu_set', 'theme_location' => 'MainMenuLeft' ) ); ?>
<?php } ?>

Now you should be able to switch back and forth between the default menu and UberMenu without issue.

If you wish to share the menu space between UberMenu and a right-aligned menu, you will want to disable the Expand Menu Bar Full Width option in UberMenu’s Basic Configuration.

You may also wish to reduce the height of UberMenu and remove its background so that it better fits within the Mingle menu bar.

#megaMenu.megaMenuHorizontal{
  background:transparent;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a, 
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:9px;
  padding-bottom:8px;	
  border:none;
}

Keep in mind that Mingle uses two menus, while UberMenu can only be used once per page. If you’d like to use UberMenu styles for “both” menus, I would recommend removing the second menu, using a single UberMenu, setting it to 100% width, and position some of the menu items to the right via CSS (the customization details are beyond the scope of this help file).

Old Instructions

Parallelus informs me that the same general solution works for Salutation as well, though it only has a single menu. Note that the line numbers below may differ somewhat.

Mingle and Salutation are awesome themes, but integrating them with UberMenu is a little tricky. Here are some guidelines for the changes you’ll need to make:

1. First, Mingle/Salutation’s menu javascript throws an error if the default menu doesn’t exist. To solve this problem, we need to comment out the call to ddsmoothmenu() for the left menu in the theme’s footer.php around line 51

//if ($theHeader['menu_left']) { echo 'ddsmoothmenu.init({ mainmenuid: "MM", orientation: "h", classname: "slideMenu", contentsource: "markup" });'; }

2. To remove the theme’s styling from the menu, you’ll need to change the class name of the left/primary menu (.slideMenu) around line 50 of design-header.php

//From:
<?php if ($theHeader['menu_left']) { ?>
    <div id="MM" class="slideMenu">
 
//To:
<?php if ($theHeader['menu_left']) { ?>
    <div id="MM" class="uberslideMenu">

3. Now things are working as they should, you’ll just need to restyle a bit (see Customizing UberMenuMenu). You’ll likely want to reduce the padding on the top level menu items to make it fit, and maybe make the background of the menu bar transparent. Here is some code to get you started:

#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a {
  padding:7px 10px;
}
#megaMenu,
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a{
  background:none;
  border:none;
  box-shadow:none;
}

Remember, the width of the submenus is limited to the width of the top level nav bar, so if you want to increase it you can adjust the size like this:

#megaMenu{
  width:500px;
}

4. Keep in mind that Mingle uses two menus, while UberMenu can only be used once per page. If you’d like to use UberMenu styles for “both” menus, I would recommend removing the second menu, using a single UberMenu, setting it to 100% width, and position some of the menu items to the right via CSS (the customization details are beyond the scope of this help file).

Flawless (GoodLayers)

Flawless by GoodLayers introduces some residual styling (see also: residual styling troubleshooting guide) and residual scripting into UberMenu, so we need to alter the theme to prevent the theme’s menu from affecting UberMenu.

By creating a child theme we can override the `header-nav.php` file to make this process future-compatible.

Result

Header Style 1

Header Style 2

Child theme to create this integration available at the end.

Recommended Skin: Vanilla

Removing residual styling and residual scripting

To prevent the theme’s scripts and styles from affecting UberMenu, we need to remove the element below:

<nav class="gdlr-navigation" id="gdlr-main-navigation" role="navigation">

The best way to do that is to copy `header-nav.php` into a child theme and make it look like this:

<?php 
	if( has_nav_menu('main_menu') ){
		
		wp_nav_menu( array('theme_location'=>'main_menu') );
		
		global $theme_option;
		if( empty($theme_option['enable-top-search']) || $theme_option['enable-top-search'] == 'enable' ){
			echo '<div class="gdlr-nav-search-form-button" id="gdlr-nav-search-form-button"><i class="icon-search"></i></div>';
		}
	}
?>

Menu Position

If you want the menu aligned to the right like Flawless’s Header Style 1, we need to float it right

.gdlr-style-1.gdlr-navigation-wrapper{
	float:right;
}

Menu Height

To make the menu appear like in the Flawless Header Style 1, we need to increase the height of UberMenu

.gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > a, 
.gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:36px;
  padding-bottom:36px;
}

When the menu is fixed, we need to reduce that padding

.gdlr-fixed-menu .gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > a, 
.gdlr-fixed-menu .gdlr-style-1 #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:25px;
  padding-bottom:25px;
}

Search Button

To allow for the Flawless search button to work, we need to position it absolutely and leave space for it in the menu

/* Search Button */
#gdlr-nav-search-form-button{
    position:absolute;
    right:20px;
    top:22px;
    z-index:50;
}
.uber-wrap-with-search #megaMenu ul.megaMenu{
	padding-right:70px;
	z-index:20;
}

Submenu Positions

With Header Style 1, to allow the submenus to be the full width of the site’s content area, we can add this CSS:

@media only screen and (min-width: 960px){
	.gdlr-style-1 #megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
		width:1000px !important;   
		max-width:none !important;
		right:0;
		left:auto;
	}

	/* Search button submenu alignment */
	.uber-wrap-with-search #megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega-fullWidth > ul.sub-menu.sub-menu-1{
		right:70px !important;
	}
}

CSS Tweaks

Flawless adds `width:auto` to every image. This will override the image sizing code used in UberMenu, so we need to give UberMenu images a specific style if your images are being resized:

/* Override Flawless styles that will make images display at natural width */
#megaMenu .ss-nav-menu-with-img img{
  width:16px;
}

Responsiveness

To prevent the Flawless responsive menu from appearing, switch it off in the settings

We also want to make the responsive toggle full width, reduce the item padding, and hide the search button at responsive sizes.

@media only screen and (max-width: 767px){
	.gdlr-navigation-wrapper{
		float:none;
		width:100%;
		margin-bottom:10px;
	}
	.uber-wrap #megaMenu ul.megaMenu > li.menu-item > a, 
	.uber-wrap #megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
		padding-top:15px;
		padding-bottom:15px;
	}
	#gdlr-nav-search-form-button{
		display:none;
	}
	.uber-wrap-with-search #megaMenu ul.megaMenu{
		padding-right:0;
	}
}

Child Theme

Here’s a child theme that you can install which will automatically create all of the above changes. You should still check the CSS to tweak things the way you like.

Flawless Child Theme

To use the child theme, make sure your Flawless theme is installed in the directory wp-content/themes/flawless, without any version number attached.

Modernize (GoodLayers)

Modernize uses its own responsive system and adds a bit of residual styling to the menu, so we’ll want to replace the entire GoodLayers navigation with UberMenu instead. Here’s what to do (requires UberMenu 2.3+):

1. Make edits in a Child Theme

It is recommended that you make all edits in a Child Theme in order to preserve your changes when the next theme update comes along.

Once you have your child theme created, just copy the header.php from the modernize theme into the child theme.

2. Replace Modernize menu with UberMenu

The simplest way to resolve the conflicts between Modernize and UberMenu is to simply replace the entire Modernize menu with UberMenu. In the header.php file, you will find this navigation section:

		<!-- Navigation and Search Form -->
		<div class="main-navigation-wrapper">
			<?php 
				if( $gdl_is_responsive ){
					echo '<div class="responsive-container-wrapper container-wrapper">';
					dropdown_menu( array('dropdown_title' => '-- Main Menu --', 'indent_string' => '- ', 'indent_after' => '','container' => 'div', 'container_class' => 'responsive-menu-wrapper', 'theme_location'=>'main_menu') );	
					echo '</div>';
				}
			?>
			<div class="navigation-wrapper">
				<div class="navigation-container-wrapper container-wrapper">
					<!-- Get Navigation -->
					<?php wp_nav_menu( array('container' => 'div', 'container_class' => 'menu-wrapper', 'container_id' => 'main-superfish-wrapper', 'menu_class'=> 'sf-menu',  'theme_location' => 'main_menu' ) ); ?>
					
					<!-- Get Search form -->
					<?php if(get_option(THEME_SHORT_NAME.'_enable_top_search','enable') == 'enable'){?>
					<div class="search-wrapper"><?php get_search_form(); ?></div> 
					<?php } ?>
					
					<div class="clear"></div>
				</div> <!-- navigation-container-wrapper -->
			</div> <!-- navigation-wrapper -->
		</div>

We’ll leave the outermost wrapper intact, but replace everything inside it with UberMenu. Here’s the resulting section of header.php:

<!-- Navigation and Search Form -->
<div class="main-navigation-wrapper">
	<?php uberMenu_direct( 'main_menu' ); ?>
</div>

We use the ‘main_menu’ theme location provided by Modernize, so you just need to activate UberMenu on your Main Menu theme location.

Mobile Devices

If your menu won’t expand on mobile devices, it is likely obstructed by another element and you may need to add

.main.container{
  clear:both;
}

Worldwide (GoodLayers)

The Worldwide theme uses two menus with the same theme location for its responsive menu system, so they both appear when UberMenu is activated. It also creates residual styling (see also: residual styling troubleshooting guide). To resolve this, we’ll replace the system with UberMenu Direct instead. I will provide a child theme with these changes at the end.

In header.php we replace

// responsive menu
if( $gdl_is_responsive && has_nav_menu('main_menu') ){
    dropdown_menu( array('dropdown_title' => __('-- Main Menu --', 'gdl_front_end'), 'indent_string' => '- ', 'indent_after' => '','container' => 'div', 'container_class' => 'responsive-menu-wrapper', 'theme_location'=>'main_menu') );   
    echo '<div class="clear"></div>';
}
                 
// main menu
echo '<div class="main-navigation-wrapper">';
if( has_nav_menu('main_menu') ){
    echo '<div class="main-superfish-wrapper" id="main-superfish-wrapper" >';
    wp_nav_menu( array('container' => '', 'menu_class'=> 'sf-menu',  'theme_location' => 'main_menu' ) );
    echo '<div class="clear"></div>';
    echo '</div>';

with

echo '<div class="main-navigation-wrapper-uber">';
if( function_exists( 'uberMenu_direct' ) ) uberMenu_direct( 'main_menu' );

This removes the extra wp_nav_menu() call (to remove the duplicate menu) and changes the wrapper class so that the residual styling no longer applies to UberMenu.

Now the issue is that UberMenu will sit above the “Random” button that the theme includes outside of the menu. To resolve this, we’ll position the button absolutely and leave a space for it if we have right-aligned items, as well as adjust the layering to make sure the button stays on top and is clickable.

.main-navigation-wrapper-uber{
    position:relative;
}
div.random-post{
    right:0;
    position:absolute;
    z-index: 40;
}
#megaMenu{
    z-index:30;
}
@media only screen and (min-width: 999px) {
	#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega-floatRight{
		margin-right:60px;
	}
}
@media only screen and (max-width: 999px) {
	div.main-navigation-wrapper-uber .random-post { display: none; }
}

If we want to make the menu a bit taller like the original menu, we can add

#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a, 
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > span.um-anchoremulator{
	padding-top:18px;
	padding-bottom:18px;
}
#megaMenu > ul.megaMenu > li.menu-item > .wpmega-nonlink > form#searchform.ubersearch-v2 .ubersearch{
	margin-top:6px;
}

We’ll also make sure the top menu overlaps properly

div.top-navigation-wrapper{
	position:relative;
	z-index:25;	
}
div.gdl-navigation-wrapper{
	position:relative;
	z-index:20;
}

(Also, the Flat Skins Pack styles work really well with this theme).

Here’s the result

Child Theme

I have created a child theme which incorporates all of these changes, overriding the header and adding the required styles.

/*
...
Template: worldwide-v1-01
...
*/

in the header at the top of the style.css, you’ll see the Template declaration. This must match the directory of the parent theme. So if you are on v1.02, you’d need to change this to

/*
...
Template: worldwide-v1-02
...
*/

Or whatever the value of your worldwide directory path is.

Second, in the @import statement, you’ll need to make the same change

@import url("../worldwide-v1-02/style.css");

Download Worldwide Child Theme

PageLines DMS

To use UberMenu with PageLines DMS, I’ve created a custom section that you can install via a plugin

1. Install the UberMenu Adapter plugin from the PageLines DMS Store

2. Activate the plugin

3. Enable the UberMenu Easy Integration option in your UberMenu Control Panel

UberMenu 3

UberMenu 2

4. In Appearance > Menus, set a menu in the UberMenu [Easy Integration] theme location.

5. Drag the UberMenu section into your layout to add UberMenu to your site.

Old Instructions

If you are not using the version available in the PageLines store, you can download it here and install it as a section. Steps 1 and 2 would look like this:

1. Download the UberMenu Navigation Adapter Section

2. Unzip the section and upload the ubernav folder into your /sections directory

Jump Start (ThemeBlvd) [Akita]

Are you using UberMenu 3? Please follow the UberMenu 3 JumpStart (ThemeBlvd) Integration Guide

Jump Start is an excellent framework by Jason over at ThemeBlvd. The only compatibility issue with UberMenu is some residual styling from the theme framework. But since the theme framework is so flexible and you’re likely already using a child theme, swapping out the menus is simple – just choose the appropriate code below.

Theme Blvd Framework Themes

The code below applies to all Theme Blvd Framework themes except Akita and Commodore:

(place in child theme functions.php)

/**
 * Integrate ubermenu in themes running Theme Blvd Framework v2+.
 */
function my_ubermenu_integration() {
    remove_all_actions( 'themeblvd_header_menu' );
    add_action( 'themeblvd_header_menu' , 'uberMenu_easyIntegrate' );
}
add_action( 'after_setup_theme', 'my_ubermenu_integration' );

Akita and Commodore

If you are using Akita or Commodore, use this special PHP instead of the code above.

(place in child theme functions.php)

/**
 * Integrate ubermenu in Akita and Commodore. -- These two 
 * themes are unique in that the menu is in a separate location 
 * than the framework default.
 */
function my_ubermenu_integration(){
    remove_all_actions( 'themeblvd_header_after' );
    add_action( 'themeblvd_header_after' , 'uberMenu_easyIntegrate' );
}
add_action( 'after_setup_theme', 'my_ubermenu_integration' );

Activating Easy Integation to finish the integration

Now just activate Easy Integration in the UberMenu Control Panel, set a menu for and enable the UberMenu Theme Location in Appearance > Menus, and you should be good to go!

If you get a layout issue (like the breadcrumbs are no longer visible), adding this code may help:

#internal_wrapper{
  clear:both;
}

Old Instructions (just for reference)

(Place this in your child theme’s functions.php):

function replace_themeblvd_header_menu(){
    //Option 1: General Framework Menu Removal (this is already removed in Akita)
    //remove_action( 'themeblvd_header_menu', 'themeblvd_header_menu_default' );
     
    //Option 2: Theme- (Akita) specific menu removal (the menu that replaces the default in Akita out-of-the-box)
    //remove_action( 'themeblvd_header_menu', 'akita_header_menu' );
 
    //Option 3: Catch-all menu removal (just remove everthing - could have other impact)
    remove_all_actions( 'themeblvd_header_menu' );
     
    //Insert UberMenu
    add_action( 'themeblvd_header_menu' , 'uberMenu_easyIntegrate' );
}
add_action( 'after_setup_theme', 'replace_themeblvd_header_menu' );

Now just activate Easy Integration in the UberMenu Control Panel, set a menu for and enable the UberMenu Theme Location in Appearance > Menus, and you should be good to go!

If you get a layout issue (like the breadcrumbs are no longer visible), adding this code may help:

#internal_wrapper{
  clear:both;
}

GeoTheme

The problem with the current version of GeoTheme is that it calls the wp_nav_menu function twice, only printing it the second time, and UberMenu will only be applied to the first.

Basically, GeoTheme is trying to check for the existence of the menu before printing it, like this:

if( wp_nav_menu( array( 'theme_location' => 'main_menu','fallback_cb' =>false,'echo' =>false) ){ 
    wp_nav_menu( array( 'theme_location' => 'main_menu', 'fallback_cb' => 'nav_nav', 'echo' => true, 'container' => 'div', 'container_id' => 'main_nav_menu' ) ); 
    ...
}else{ ?>

It generates the code for the menu, checks that something was returned, then generates the code for the menu a second time. Because UberMenu is only applied to the wp_nav_menu function the first time it is called (which was not actually printed to the site), no UberMenu is displayed – even though it was properly processed by the plugin.

At the very least, the first output should simply be captured in a variable and then printed (so that all the work of creating the menu markup doesn’t have to be executed twice). Alternatively, the standard WordPress function has_nav_menu can be used to do the check without doing all of the processing.

The solution

UberMenu 2.4.0.1+

With current versions of UberMenu, you should be able to set the Theme Location Instance to 2 (under UberMenu Control Panel > Advanced Settings ) to resolve GeoThemes’ use of the same theme location parameter.

UberMenu < 2.4

We need to only call wp_nav_menu once with this theme location. In your header.php, either replace the wp_nav_menu() call within the if statement with has_nav_menu(), like this:

Make sure you edit the wp_nav_menu call with the main_menu theme_location.

if( has_nav_menu( 'main_menu' ) ){ 
    wp_nav_menu( array( 'theme_location' => 'main_menu', 'fallback_cb' => 'nav_nav', 'echo' => true, 'container' => 'div', 'container_id' => 'main_nav_menu' ) ); 
    ...
}else{ ?>

Or, just replace the entire if/else statement with:

wp_nav_menu( array( 'theme_location' => 'main_menu' ) );

Alternatively

If you can’t edit this for some reason, your other option is to remove the double menu check from UberMenu (ubermenu/core/UberMenu.class.php line 285 or so), comment out:

if( $this->count > 0 ) return $args;

However, this solution is not recommended as it does not address the root cause of the problem, the duplication of the menu call.

DynamiX (themeva)

DynamiX creates residual styling (see also: residual styling troubleshooting guide) and residual scripting based on its #nv-tabs element.

Since the theme’s wp_nav_menu call doesn’t appear in a standard WordPress template, we adjusting the child theme gets slightly more complicated:

1. Create a child theme for DynamiX. The style.css would look like this:

/* 
Theme Name: DynamiX Child Theme
Theme URI: http://themeva.com
Author: themeva
Version: 1.0
Template: DynamiX
Description: DynamiX WordPress Child Theme
Author URI: http://themeva.com
License: GNU General Public License
License URI: license.txt
*/

2. Copy header.php into the child theme

3. Create an /inc folder in the child theme

4. Copy the parent theme’s lib/inc/config-header.php file into the child theme’s /inc directory

5. Edit the child theme’s config-header.php to remove the nv-tabs element (both open and close nav tags)

<nav id="nv-tabs" class="static <?php echo $NV_menu_alignment; ?>">

(around line 269)

6. Remove this PHP from the config-header.php file to prevent a duplicate responsive menu

if( of_get_option('mobile_menu') != 'select' )
{
    ...
}

and/or switch your theme’s responsive menu setting to ‘Select’

7. Edit the child theme’s header.php to include the child theme’s config-header.php instead

require "inc/config-header.php";

(around line 196)

8. Activate the child theme

9. Re-assign and re-activate your theme location

This should remove the residual styling and scripting from the theme. You may wish to align your menu to the right as well, as this will move it below the logo.

Karma

Are you using UberMenu 3? Please check out the UberMenu Karma Integration Guide

UberMenu integrates well with Karma except when it comes to templates with additional menus. If you use a template like Left Nav + Sidebar, you’ll find that both the header nav menu and the sidebar nav menu become UberMenus.

The issue arises because Karma defines both menus as the same menu theme location. That is, both the menu in the header and the menu in the sidebar are defined as “Primary Navigation” by Karma. As a result, there is no distinction to be made between the two menus (they are really the same menu, printed twice), so you end up with two UberMenus.

/* Karma/header.php line 76-80 */
 
<?php if(has_nav_menu('Primary Navigation')): ?>
<ul id="menu-main-nav">
<?php wp_nav_menu(array('theme_location' => 'Primary Navigation' , 'depth' => 0 , 'container' =>false , 'walker' => new description_walker() )); ?>
</ul>
<?php endif; ?>
 
 
/* Reformatted here for visualization */
wp_nav_menu( array(
 'container' =>false,
 'theme_location' => 'Primary Navigation',       //PROBLEM
 'depth' => 0,
 'walker' => new description_walker())
 );
}
 
/****************************************************/
 
/* Sidebar - Karma/functions/global/subnav-left.php line 2*/
$menu_code = wp_nav_menu( array(
 'container' =>false,
 'theme_location' => 'Primary Navigation',       //PROBLEM
 'sort_column' => 'menu_order',
 'menu_class' => '',
 'echo' => false,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new sub_nav_walker())
 );

The solution is to define a menu theme location for each real menu location within the templates (header, nav, etc). Really, we just want to make sure that the header menu is an UberMenu and nothing else. So the simplest solution is to use UberMenu Easy Integration for the header menu. This will automatically define a new theme location called “UberMenu”. Switch it on in Appearance > UberMenu > Theme Integration > Easy Integration, then add the appropriate code:

/* Replace the entire menu section call in header.php line 76-80 with uberMenu_easyIntegrate() */
 
/* Remove this: */
<?php if(has_nav_menu('Primary Navigation')): ?>
<ul id="menu-main-nav">
<?php wp_nav_menu(array('theme_location' => 'Primary Navigation' , 'depth' => 0 , 'container' =>false , 'walker' => new description_walker() )); ?>
</ul>
<?php endif; ?>
 
 
/* Add this: */
<?php uberMenu_easyIntegrate(); ?>

Once you’ve done that, just go to Appearance > Menus and set the appropriate menu for the UberMenu location, and activate that location (deactivate the others). You can set whatever menu you want for the Primary Navigation location, which will now be used for things like sidebars (you can use the same menu here, it’ll just be printed normally rather than as an UberMenu.

So now,

• UberMenu (location) = header menu
• Primary Navigation = other menus

Striking

Striking integrates with UberMenu very well, but because the header elements of striking are all positioned absolutely, you’ll need to position UberMenu absolutely with custom CSS as well.

#megaMenu{
  position: absolute;
  right: 0;  
  bottom: 0;
  width: 650px; /* Optional */
}

Also see this excellent tutorial: How to get Übermenu full width in striking

If you are using the Sticky Extension, you may need to add some code like this:

#megaMenu,
#megaMenu-sticky-wrapper{
 right: 0 !important; 
 bottom: 0 !important; 
 top:auto;
 left:auto;
 position: absolute !important; 
}
#megaMenu-sticky-wrapper{
 width:100%; 
}

Roots

Roots creates residual styling and removes critical classes from the menu. We can fix these issues in a child theme.

1. Stop Roots from removing Core WordPress menu item classes

Roots does a lot of non-standard things to alter the normal WordPress installation, and this can be problematic for plugins. One main issue this theme presents is that it strips core WordPress Menu Item classes that are necessary for UberMenu to style the menu properly. Here is the code from Roots’ lib/nav.php line 55.

/**
 * Remove the id="" on nav menu items
 * Return 'menu-slug' for nav menu classes
 */
function roots_nav_menu_css_class($classes, $item) {
  $slug = sanitize_title($item->title);
  $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);
  $classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes);

  $classes[] = 'menu-' . $slug;

  $classes = array_unique($classes);

  return array_filter($classes, 'is_element_empty');
}
add_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10, 2);
add_filter('nav_menu_item_id', '__return_null');

As a result, all of the critical, core menu item classes like menu-item are removed, and UberMenu’s styles cannot apply to your menu. Themes shouldn’t remove core functionality from WordPress, as WordPress is a modular system that needs to share core functionality across themes and plugins.

We can add this code to a child theme to stop the removal of these important classes:

function stop_removing_core_classes(){
  remove_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10 );
  remove_filter('nav_menu_item_id', '__return_null');
}
add_action( 'init' , 'stop_removing_core_classes' );

2. Remove residual styling

The templates/header-top-navbar.php should be overridden in a child theme. Here is the target code:

<nav class="nav-main nav-collapse collapse" role="navigation">
   <?php
     if (has_nav_menu('primary_navigation')) :
       wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav'));
     endif;
   ?>
</nav>

Instead of wrapping wp_nav_menu() in a hard-coded nav element, Roots should be making use of the wp_nav_menu arguments that can set the container to a nav and pass the appropriate classes. Instead, we’ll need to edit this – you can either just remove all the classes from the nav element

<nav role="navigation">
   <?php
     if (has_nav_menu('primary_navigation')) :
       wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav'));
     endif;
   ?>
</nav>

Or simply remove the nav wrapper altogether, and UberMenu will take care of the rest.

   <?php
     if (has_nav_menu('primary_navigation')) :
       wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav'));
     endif;
   ?>

3. Stop Roots from stripping the menu wrapper

Roots filters the menu wrapper which strips the

/**
 * Clean up wp_nav_menu_args
 *
 * Remove the container
 * Use Roots_Nav_Walker() by default
 */
function roots_nav_menu_args($args = '') {
  $roots_nav_menu_args['container'] = false;

  if (!$args['items_wrap']) {
    $roots_nav_menu_args['items_wrap'] = '<ul class="%2$s">%3$s</ul>';
  }

  if (current_theme_supports('bootstrap-top-navbar') && !$args['depth']) {
    $roots_nav_menu_args['depth'] = 2;
  }

  if (!$args['walker']) {
    $roots_nav_menu_args['walker'] = new Roots_Nav_Walker();
  }

  return array_merge($args, $roots_nav_menu_args);
}
add_filter('wp_nav_menu_args', 'roots_nav_menu_args');

remove_filter('wp_nav_menu_args', 'roots_nav_menu_args');

Suffusion

New solution (as of October 2012)

Suffusion has added a new filter, making this process much easier (though if the action hooks used priorities, we could simply unhook the old action and add a new action rather than having to use this filter hack).

Use the appropriate code for your chosen theme location (Above or Below header).

Note in UberMenu 3, you can replace the uberMenu_easyIntegrate() functions below with the manual integration code generated in your Control Panel, for example ubermenu( 'main' , array( 'menu' => 34 ) );

Top Navigation (Above Header)

In your functions.php file, add:

function nav_uber(){
    uberMenu_easyIntegrate();
    return false;
}
add_filter( 'suffusion_can_display_top_navigation', 'nav_uber' );

Main Navigation (Below Header)

function nav_uber(){
    uberMenu_easyIntegrate();
    return false;
}
add_filter( 'suffusion_can_display_main_navigation', 'nav_uber' );

Then follow the guide for activating Easy Integration, and you should be all set!

iThemes Builder

1. Activate Strict Mode in Appearance > UberMenu > Theme Integration
2. Activate UberMenu Easy Integration in Appearance > UberMenu > Theme Integration
3. Assign the appropriate menu to the UberMenu [Easy Integration] theme location Appearance > Menus > Manage Locations
4. Add a new HTML module in Builder, placing it where you want your menu to appear.
5. Enter the Easy Integration shortcode in your module:

   [uberMenu_easyIntegrate]

6. Save the HTML module
7. Builder tends to wrap code in containers that set overflow:hidden. If your submenus are hidden once you set up your menu, you’ll need to apply overflow:visible !important to the container. For example:

   #builder-module-#########,
   #builder-container-########## div.builder-module-outer-wrapper,    /* either this */
   #builder-container-########## div.builder-module-block-outer-wrapper{   /* or this */
       overflow:visible !important;
   }
   

   where ######### is the ID of your module/container. The first selector may only be necessary if you’re using a navigation module rather than an HTML module.

TIP

The easiest way to determine the ID is to use Firebug or Chrome Developer tools to inspect the
menu, find its wrapper module, and grab the ID.

You can also use the following CSS to apply to the second module across all of your layouts, for example:

.builder-module-2,
.builder-module-2-outer-wrapper,
.builder-module-2.builder-module-block-outer-wrapper,
.builder-container-2 .builder-module-outer-wrapper,
.builder-container-2 .builder-module-block-outer-wrapper,
.builder-container-2 .builder-module-column-1-outer-wrapper,
.builder-module-block-outer-wrapper{
    overflow:visible !important;
}

Replace the 2 with whichever your UberMenu module is within the layout.

Your other option is to set #megaMenu{ position:absolute; } and then set an explicit height on the container instead of changing the overflow:hidden;

Neighborhood (SwiftIdeas)

UberMenu and Neighborhood actually work pretty well together out of the box – there is minimal conflict. There are several things this guide will seek to improve:

1. Unify UberMenu and Neighborhood’s menu bar items aesthetically
2. Improve responsive integration

Unifying the menu bar

Out of the box with all default settings, UberMenu integrated into Neighborhood will look like this:

It’s working properly, but the menu looks disjointed due to the black background on UberMenu’s menu bar and the white background on the Neighborhood bar.

Simplest solution

The simplest solution is to use the Vanilla skin that comes with UberMenu. Here’s the result after Changing the Menu Bar Height slightly with the CSS below

#megaMenu > ul.megaMenu > li.menu-item > a,
#megaMenu > ul.megaMenu > li.menu-item > span.um-anchoremulator{
    padding-top:14px;
    padding-bottom:14px;
}

Using a non-white menubar color

If you want a menu bar that isn’t white, the best option is to style the background of the theme’s menu bar and set the UberMenu menu bar to transparent.

Setting UberMenu’s menu bar to transparent

This part is easy. Add this CSS:

#megaMenu{
    background:none;
    border:none;
}
/* Removes item borders if any */
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
  border-left:none !important;
}

Setting the Neighborhood menu bar background color

To set the background on the full width menu bar, use

#main-nav{
  background:#333;
}

Generally, you’ll want to change the background to the same or a similar color as that set on the #megaMenu element for that skin.

Keep in mind that the right side of the menu bar is not controlled by UberMenu, and is designed by the theme to be on a light background. If you intend to place it on a black background, you may want to customize the colors. This CSS will get you started customizing the theme:

#main-nav div.header-right ul.menu > li{
  border-left-color:#555;
}
#main-nav nav .menu > li > a,
#main-nav #menubar-controls a{
    color: #FFF;
}

Here’s how it might look:

Note that the cart icon is an image from the theme and can’t be altered with CSS

Responsive Menu

At mobile sizes, with Neighborhood + UberMenu, you’ll end up with a double-reveal menu effect.

So you have two choices: remove the Neighborhood menu button and only use UberMenu, or allow the Neighborhood menu button to reveal UberMenu entirely.

Using UberMenu Only

To use UberMenu only, add this CSS:

@media (max-width:767px){
    .show-main-nav{
        display:none !important;
    }
    #main-navigation{
        display:block !important;
    }
    #main-nav .span9{
    	margin-bottom:0;
    }
}

Neighborhood menu reveal

To use the Neighborhood button to reveal UberMenu, add this CSS:

@media (max-width:767px){

    #main-nav .span9{
    	margin-bottom:0;
    }

}

and disable the UberMenu toggle in the Control Panel

Here’s the result closed:

and open:

Sticky Menu

If you wish to use UberMenu’s Sticky Extension, first disable Neighborhood’s “Mini Header”

Then make sure to give UberMenu a background if it is transparent. You can do this through the UberMenu Sticky Control Panel:

or with custom CSS:

#megaMenu.ubermenu-sticky{
	/* Set to your preferred color */
	background:#222;
}

Dante (SwiftIdeas)

Dante introduces some residual styling (see also: residual styling troubleshooting guide) which needs to be eliminated so that the theme’s menu styles don’t prevent UberMenu from functioning properly.

The Result

Here’s how UberMenu looks with Dante after executing the following steps:

Disabling Dante Mega Menu

The majority of the residual styling is easily removed by disabling Dante’s mega menu functionality.

Visit the Theme Options > General Options > Disable Mega Menu Functionality and enable this option

Aligning menu items to the right

To align the menu items to the right like the Dante default menu, follow the instructions to align all top level menu items to the right

Using the Dante search bar

If you want to use the Dante search bar, you’ll need to leave some space at the end of UberMenu for it, since it is absolutely positioned.

Add this custom CSS to make the search button usable and the logo clickable

#megaMenu.megaMenuHorizontal ul.megaMenu{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	box-sizing:border-box;
	padding-right:50px;
}
.header-container nav{
	z-index:40;
}
.header-container div#logo,
.header-container nav.search-nav{
	z-index:50;
}

Recommended Skin

The skin that works best with Dante is the “Vanilla” skin.

Responsive Menu

If you want to use UberMenu as your responsive menu, add this CSS:

#main-navigation{
	display:block !important;
}
.header-container #logo .mobile-menu-show{
	display:none !important;
}

To remove the theme’s responsive menu entirely, you could override the `sf_mobile_menu()` function in your child theme’s functions.php to prevent the extra menu from being printed.

function sf_mobile_menu() {}

Residual Styling

There is still some minor residual styling from the theme’s `id=”main-navigation”`. I have not noticed any side effects from this with Dante, however, if you need to eliminate the residual styling entirely you can override the `sf_header()` or `sf_main_menu()` function found in `sf-header.php` to alter the ID.

FlexForm (SwiftIdeas)

FlexForm is a very nice theme from Swift Ideas. To make it work with UberMenu we just need to remove some of the extra menu capabilities it has built in and remove some residual styling to allow UberMenu to control the menu system.

This tutorial deals with implementing UberMenu in the Main Menu theme location.

Responsiveness & Styles

The main navigation is located in FlexForm’s header.php. It looks like this

						<!--// OPEN NAV SECTION //-->
						<div id="nav-section" class="<?php echo $nav_class; ?> span9 clearfix">
							<div class="nav-wrap clearfix">

								<!--// OPEN MAIN NAV //-->
								<a href="#" class="visible-phone show-menu"><?php _e("Select a page", "swiftframework"); ?><i class="icon-angle-down"></i></a>
								<nav id="main-navigation">

									<?php
									if(function_exists('wp_nav_menu')) {
									wp_nav_menu(array(
									'theme_location' => 'main_navigation',
									'fallback_cb' => ''
									)); }
									?>

								<!--// CLOSE MAIN NAV //-->
								</nav>

								<?php if ($enable_nav_search) { ?>

								<div id="nav-search">
									<a href="#" class="nav-search-link"><i class="icon-search"></i></a>
									<form method="get" action="<?php echo home_url(); ?>/">
										<input type="text" name="s" autocomplete="off" />
									</form>
								</div>

								<?php } ?>

							</div>
						<!--// CLOSE NAV SECTION //-->
						</div>

I recommend copying this header.php into your child theme to make the following edits:

Replace the entire menu markup with UberMenu Direct

<!--// OPEN NAV SECTION //-->
<div id="nav-section" class="<?php echo $nav_class; ?> span9 clearfix">
	<?php uberMenu_direct( 'main_navigation' ); ?>
<!--// CLOSE NAV SECTION //-->
</div>

This does two things:

1. It removes residual styling from the theme
2. It removes the responsive toggle button, which is superfluous once UberMenu is installed

FlexForm Search

If you wish to continue using the FlexForm Search bar, I recommend adding that code below UberMenu:

<!--// OPEN NAV SECTION //-->
<div id="nav-section" class="<?php echo $nav_class; ?> span9 clearfix">
	<?php uberMenu_direct( 'main_navigation' ); ?>
	<div id="nav-search">
		<a href="#" class="nav-search-link"><i class="icon-search"></i></a>
		<form method="get" action="<?php echo home_url(); ?>/">
			<input type="text" name="s" autocomplete="off" />
		</form>
	</div>
<!--// CLOSE NAV SECTION //-->
</div>

Then add this CSS to position the search box:

#megaMenu, #megaMenu-sticky-wrapper{
  position:relative;
  z-index:20;
}
#nav-search{
  position: absolute;
  right: 0;
  top: 0;
  margin: 5px;
  z-index: 30;
}
@media only screen and (max-width: 767px) {
  #nav-search{
    position:relative;
  }
}

Sticky Extension

If you’re using the Sticky Extension, you’ll want to disable the Mini-Header that is built into FlexForm so that it does not cover up UberMenu.

You can disable the Mini Header in FlexForm Options > Header Options > Mini header

If your menu collapses when you return to the top of the page, you may need to set an explicit width for your container.

Legenda (8theme)

When you activate UberMenu on Legenda out of the box, UberMenu will replace the fixed header menu, but the main menu and responsive menu will be the theme’s. Here’s how we can adjust that

The Main Menu & Fixed Menu

Legenda reuses the theme_location for both the fixed and main menus. Since UberMenu can only apply to one of these, it applies to the first one, resulting in the fixed menu becoming an UberMenu and the main menu remaining a theme menu.

There are a few options to handle this:

1. Main menu only, no fixed menu

If you don’t need the fixed menu, you can simply disable it. Then UberMenu will apply to the main menu instead.

Theme Options > General > Fixed navigation

2. Fixed theme menu, main UberMenu

If you want to keep the fixed theme menu, but use UberMenu as your main menu, just set the Theme Location Instance to 2 in the UberMenu settings. Then UberMenu will apply to the main menu but not the fixed menu.

Appearance > UberMenu > Advanced Settings > Theme Location Instance

3. UberMenu as both main & Sticky menu

To make UberMenu appear as both the main and fixed menu, we need to make a single instance of the menu both the main menu and fixed on scroll, rather than using two separate menus like the theme does.

To do this, we can use the UberMenu Sticky Extension.

You will want to disable the theme’s fixed nav

Theme Options > General > Fixed navigation

and make sure the Theme Location Instance is set to 1

Responsive/Mobile Menu

Out of the box, the mobile menu you see in Legenda will be the theme menu, as it hides UberMenu at mobile sizes.

The following CSS will force the theme to show UberMenu and hide the theme menu toggle:

/* Display UberMenu */
.main-nav.visible-desktop{
	display:block !important;
}
/* Hide theme menu toggle */
.menu-icon.hidden-desktop{
	display:none !important;
}

If you would like to remove the theme’s mobile menu entirely, you can remove this PHP from the header.php template:

Mobile menu line 51:

	<div class="mobile-nav side-block">
		<div class="close-mobile-nav close-block"><?php _e('Navigation', ETHEME_DOMAIN) ?></div>
		<?php 
			wp_nav_menu(array(
				'theme_location' => 'mobile-menu'
			)); 
		?>
	</div>

Mobile toggle line 222:

<div class="menu-icon hidden-desktop"><i class="icon-reorder"></i></div>

Jarida (TieLabs)

Are you using UberMenu 3? Please see the UberMenu 3 Jarida Integration Guide

When you integrate UberMenu into Jarida, you’ll find that there is residual styling (see also: residual styling troubleshooting guide) from the theme’s #main-nav nav element. To integrate UberMenu, we simply need to remove this residual styling to prevent the theme from breaking UberMenu. So we just need to change the ID so that the styles no longer apply.

Here is the original code in the theme’s header.php, with the main-nav ID

<nav id="main-nav" class="fade-in animated2<?php echo $stick; ?>">
	<div class="container">				
	<?php $orig_post = $post; wp_nav_menu( array( 'container_class' => 'main-menu', 'theme_location' => 'primary' ,'fallback_cb' => 'tie_nav_fallback',  'walker' => new tie_mega_menu_walker()  ) ); $post = $orig_post; ?>
	</div>
</nav><!-- .main-nav /-->

Here is what the code looks like after we change the ID to main-nav-uber

<nav id="main-nav-uber" class="<?php echo $stick; ?>">
	<div class="container">		
	<?php $orig_post = $post; wp_nav_menu( array( 'container_class' => 'main-menu', 'theme_location' => 'primary' ,'fallback_cb' => 'tie_nav_fallback',  'walker' => new tie_mega_menu_walker()  ) ); $post = $orig_post; ?>
	</div>
</nav><!-- .main-nav /-->

Before, with residual theme styling:

After, using child theme:

Child theme

I’ve provided a child theme which includes a modified header template. Just download the child theme, upload the zip through the WordPress theme installer, and activate the child theme. If you are already using a child theme, just copy the header.php into your child theme and make the ID edit as shown above (or use the header.php provided in the zip).

Download Child Theme

Don’t forget to re-assign your menu to the Jarida theme location in Appearance > Menus > Manage Locations after installing and activating the child theme.

Jarida Menu Settings

Please note that the menu settings in the Jarida settings are specific to the Jarida menu, and won’t apply to UberMenu, for example the sticky setting. To make your menu sticky, you could either alter the Jarida javascript to target the new menu ID rather than Jarida’s original menu ID, or you could use the UberMenu Sticky Extension.

Ultimatum

Are you using UberMenu 3? Please check out the updated UberMenu 3 Ultimatum integration guide

Ultimatum provides lots of flexibility, but its Ultimatum Menu Element does not seem to implement WordPress Menu Theme Locations, and therefore it does not meet the UberMenu requirements.

To integrate UberMenu, we’ll need to add a bit of PHP code that follows WordPress best practices of using Theme Locations instead of menu names.

First we need to Install the PHP Code Widget

Once that is installed, instead of using an Ultimatum Menu Element in your Header Layout, add a PHP Code Element instead.

In the body of the PHP Code Element, add the UberMenu Easy Integration Code

<?php uberMenu_easyIntegrate(); ?>

Don’t forget to follow the remainder of the Easy Integration Steps, including setting a menu for the UberMenu theme location and activating it.

Directory (Templatic)

Directory calls wp_nav_menu() twice with the same theme location. As a result, UberMenu attaches to the first instance, which in Directory’s case is the responsive menu.

Main menu is not affected:

Mobile menu replaced by UberMenu:

For reference: If UberMenu replaces your responsive menu but not your main menu

Using UberMenu as the main menu only

If you just want to use UberMenu as your main menu, you can simply change your Theme Instance setting to 2

Here’s the result:

UberMenu replaces the main menu without issue.

However, you mobile menu will now be Directory’s menu

At this point, you can either use Directory’s mobile menu, use something like ShiftNav as your mobile menu, or make some adjustments to the theme so that UberMenu can be both your main and mobile menu.

Making UberMenu both the main and mobile menu

If you want to use UberMenu as both your main and mobile menu, you’ll need to remove the Directory mobile menu and allow UberMenu to be shown on mobile devices.

1. Display UberMenu on mobile devices

First, we need to prevent the theme from hiding UberMenu on mobile devices. We can do that by adding this Custom CSS:

#menu-secondary{
	display:block!important;
}

While this is much easier to maintain, it’s not best practice.

2. Disable the Directory mobile menu

Next, we need to prevent the theme’s mobile menu from displaying. There are two ways to do this:

Option A: Hide with CSS

The simple option is to just hide the theme’s menu toggle with CSS:

#mobile_header{
    display:none !important;
}

Option B: Remove from markup

Optimally, you would remove the menu from the markup entirely. To do so, copy the header.php into a child theme and remove the #mobile_header element from the markup. The following child theme does just that:

Directory Child Theme

You can upload and activate this Child Theme to remove the mobile menu and use UberMenu as your main menu. Please keep in mind the following two alerts:

Now that we’ve remove the mobile menu (the first instance of the menu), you’ll need to change the UberMenu Theme Location Instance setting back to 1

Don’t forget to re-assign your menu to the “Secondary” theme location after activating your child theme.

Newspaper (tagDiv)

In the Newspaper theme, the theme calls wp_nav_menu twice with the same theme_location parameter. Because the mobile menu is called first, and you can only have one UberMenu per page, UberMenu is applied only to the mobile menu, and the primary menu remains unchanged.

UberMenu 2.4.0.1+

With current versions of UberMenu, you should be able to set the Theme Location Instance to 2 (under UberMenu Control Panel > Advanced Settings ) to resolve Newspaper’s use of the same theme location parameter.

And that’s it!

UberMenu < 2.4

Now, Newspaper comes with a child theme, so if you wanted you could very easily adjust the header to remove the mobile menu and just use UberMenu. However, I assume you want to use Newspaper’s nice sidebar menu, in which case the simplest solution is to just change out the menu theme locations. In other words, we’re going to separate the two menu so that UberMenu will only affect the header menu but not the mobile menu.

1. If you haven’t already, install and activate the child theme included with Newspaper.

2. In your child theme, open up functions.php and add this code:

register_nav_menu( 'mobile-menu' , 'Mobile Menu' );

This will register a new theme location called “Mobile Menu”, which will appear in your Menus Panel.

3. In your child theme, create a parts/header folder, so that your directory structure looks like this:

| Newspaper-child
| - parts
| - - header

4. In the parts/header folder, copy the menu_mobile.php from your theme’s main directory (modified file available below)

5. Change the theme_location to mobile-menu

before

        wp_nav_menu(array(
            'theme_location' => 'header-menu',
            'menu_class'=> '',
            'fallback_cb' => 'td_wp_no_mobile_menu'
        ));

after

        wp_nav_menu(array(
            'theme_location' => 'mobile-menu',
            'menu_class'=> '',
            'fallback_cb' => 'td_wp_no_mobile_menu'
        ));

Here is the full menu_mobile.php file which you can use in your child theme.

6. Go back to your Manage Locations Panel, under Appearance > Menus > Manage Locations (tab), and assign your main menu to the Mobile Menu theme location.

You will now have UberMenu as your main header menu, and the theme’s menu as the mobile menu.

Things to keep in mind:

1. Do not activate UberMenu on the Mobile Menu location
2. Your mobile menu will not be an UberMenu, so any UberMenu-specific menu items or features (images, icons, widgets, colors, styles, etc) won’t affect the mobile menu
3. You can assign any menu you want to the mobile menu, it doesn’t have to be the same as the one you use for UberMenu

Orion Press (ridwanreedwan)

OrionPress creates residual styling (see also: residual styling troubleshooting guide) when integrated with UberMenu, because it wraps the wp_nav_menu call in the nav-wrap class.

If the theme were to use the built-in wp_nav_menu container functionality, it would integrate with UberMenu almost perfectly.

Here’s the default code in the header.php:

									<div class="nav-wrap">
										<?php 
										if ( has_nav_menu( 'main_menu' ) ) :
											wp_nav_menu( array( 'container' =>false, 'theme_location' => 'main_menu', 'menu_id' => 'main_menu' )); 
										else:
											echo '<span class="noMainmenu">' . __( 'Define your site main menu', 'orion' ) . '</span>';
										endif;
										?>
									</div>	

by removing the wrapper and changing the above code to simply

<?php 
	if ( has_nav_menu( 'main_menu' ) ) :
		wp_nav_menu( array( 'container' =>'div', 'container_class' => 'nav-wrap' , 'theme_location' => 'main_menu', 'menu_id' => 'main_menu' )); 
	else:
		echo '<div class="nav-wrap"><span class="noMainmenu">' . __( 'Define your site main menu', 'orion' ) . '</span></div>';
	endif;
?>

the output is identical when UberMenu is not present, but when UberMenu is activated it can replace the menu entirely without incurring any residual styling.

The only conflict I’ve seen is that when the menu collapses at mobile sizes, the search button overlaps UberMenu’s menu expand toggle button. To resolve this conflict and move the menu toggle to the left, add this CSS:

.headersearch-button{
  z-index:100;
}
#megaMenu #megaMenuToggle .megaMenuToggle-icon{
  float:left;
  margin-right:10px;
}

If you’d like the theme’s navigation container to better fit the menu, add this:

.nav-container{
	height:auto !important;
}

And if you’d like to remove the grey border added by the theme, add this:

.nav-container{
	border:none;
}

How to implement

This change should be made by copying the header.php into a child theme and making the PHP edit there. Since this is a new theme, I don’t want to provide a child theme as things may still be changing in the header template file and I wouldn’t want to provided an outdated child theme.

The CSS can either be added to a child theme’s style.css or in the UberMenu Custom Tweaks box. See Adding Custom CSS if you are unsure.

Twenty Twelve

UberMenu Integrates with TwentyTwelve, but there is residual styling (see also: residual styling troubleshooting guide) from the theme.

The best practice solution is to create a child theme, copy the header.php to the child theme, and then:

1. Remove the residual styling by removing the main-navigation class from the nav element

2. Remove the Toggle Button markup altogether

<h3 class="menu-toggle">Menu</h3>

If you do not wish to create a child theme, you can use Custom CSS – though this is not a best practice solution.

You can hide the toggle with CSS

.menu-toggle{
  display:none !important;	
}

and remove some of the residual styling with

#megaMenu ul.megaMenu li.menu-item > a,
#megaMenu ul.megaMenu li.menu-item > span.um-anchoremulator{
    text-transform:none;   
}

Twenty Fourteen

Because TwentyFourteen’s menu styles are based on its wrapper, it introduces some minor residual styling (see also: residual styling troubleshooting guide) issues with the menu.

1. To remove the residual styling, edit the header.php and change this line:

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">

to this:

<nav id="primary-navigation" class="site-navigation primary-navigation-uber" role="navigation">

(Note that you should ideally make this change in a child theme to preserve the change for future updates)

2. Once you remove the class above, the menu will be aligned to the left. To align it back to the right, add

#megaMenu{
  float:right;
}

(For reference: Adding Custom CSS)

3. Aesthetically, you will likely want the menu bar to be the same height as TwentyFourteen’s top bar, so you can add this CSS to adjust the menu bar height:

#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > a, 
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item > span.um-anchoremulator{
  padding-top:16px;
  padding-bottom:16px;
}

4. If you have the Expand Menu Bar Full Width setting enabled in UberMenu, your menu may be pushed to the next line. You can either disable that setting or add some CSS like this to properly position the theme’s nav wrapper:

@media screen and (min-width:767px){
  #primary-navigation{
	float:right;
	min-width:600px
  }
}

Here’s the result:

Gantry Framework

First, Gantry doesn’t use wp_nav_menu() as is the WordPress standard, so you’ll need to use UberMenu Easy Integration. The easiest solution is to place a text widget in the menu widget area and set the widget’s content to [uberMenu_easyIntegrate]. Don’t forget to follow the remainder of the UberMenu Easy Integration steps.

Second,
(this step should no longer be required with current versions of UberMenu
Gantry’s custom menu item options override UberMenu’s. To fix this, you may need need to edit core/UberMenu.class.php line 423:

add_filter( 'wp_edit_nav_menu_walker', array( $this , 'editWalker' ) , 2000);

If the UberMenu options don’t appear, increase 2000 to 5000.

Third,
(this step is no longer required with versions of Gantry released after 10 October 2013)
Gantry seems to have a bug regarding widget areas, so if you place a widget in UberMenu, you’ll get an error. To solve this, add a check to the Gantry function to ignore widgets without their custom widget_map parameter:

if( !isset( $params[0]['widget_map'] )) return $params;

This would be placed in plugins/gantry/core/renderers/gantrywidgetsrenderer.class.php, around line 148, as the first line in the filterWidget() function. I have detailed this issue here, and I hope it will be resolved by Gantry in their next version.

Warp Framework (YooTheme)

If you are using UberMenu 3, please see the UberMenu 3 Warp integration guide

YooTheme doesn’t use the WordPress standard wp_nav_menu function, so it doesn’t meet the UberMenu requirements. This means you’ll need to manually integrate UberMenu into the theme with UberMenu Easy Integration. Here’s what you’ll need to do:

1. Enable UberMenu Easy Integration

Follow Part 1 and Part 3 only of the Easy Integration guide (skip part 2).

2. Integrate UberMenu into YooTheme

Warp v7

Open `layouts/theme.php` and find this code:

	<?php if ($this['widgets']->count('logo + headerbar + menu + search')) : ?>
		<div class="tm-block tm-headerbar uk-clearfix <?php echo $slant_classes['headerbar']; ?>">
			<div class="uk-container uk-container-center">

				<?php if ($this['widgets']->count('logo')) : ?>
				<a class="uk-navbar-brand" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['widgets']->render('logo'); ?></a>
				<?php endif; ?>

				<?php echo $this['widgets']->render('headerbar'); ?>

				<?php if ($this['widgets']->count('search')) : ?>
				<div class="uk-navbar-flip">
					<div class="uk-navbar-content uk-visible-large"><?php echo $this['widgets']->render('search'); ?></div>
				</div>
				<?php endif; ?>

				<?php if ($this['widgets']->count('menu')) : ?>
				<div class="uk-navbar-flip uk-hidden-small">
					<?php echo $this['widgets']->render('menu'); ?>
				</div>
				<?php endif; ?>

				<?php if ($this['widgets']->count('offcanvas')) : ?>
				<a href="#offcanvas" class="uk-navbar-toggle uk-navbar-flip uk-visible-small" data-uk-offcanvas></a>
				<?php endif; ?>

				<?php if ($this['widgets']->count('logo-small')) : ?>
				<div class="uk-navbar-content uk-navbar-center uk-visible-small"><a class="tm-logo-small" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['widgets']->render('logo-small'); ?></a></div>
				<?php endif; ?>

			</div>
			<div class="tm-slant-block-bottom"></div>
		</div>
		<?php endif; ?>

Replace it with this code:

	<?php if ($this['widgets']->count('logo + headerbar + menu + search')) : ?>
		<div class="tm-block tm-headerbar uk-clearfix <?php echo $slant_classes['headerbar']; ?>">
			<div class="uk-container uk-container-center">

				<?php if ($this['widgets']->count('logo')) : ?>
				<a class="uk-navbar-brand" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['widgets']->render('logo'); ?></a>
				<?php endif; ?>

				<?php echo $this['widgets']->render('headerbar'); ?>

				<?php if( function_exists( 'uberMenu_direct' ) ) uberMenu_direct( 'ubermenu' ); ?>

				<?php if ($this['widgets']->count('logo-small')) : ?>
				<div class="uk-navbar-content uk-navbar-center uk-visible-small"><a class="tm-logo-small" href="<?php echo $this['config']->get('site_url'); ?>"><?php echo $this['widgets']->render('logo-small'); ?></a></div>
				<?php endif; ?>

			</div>
			<div class="tm-slant-block-bottom"></div>
		</div>
		<?php endif; ?>

Please contact YooThemes if you need further assistance. Since this framework doesn’t follow WordPress best practices, it can’t be supported by UberMenu.

Older Warp

If you’re using an older version of Warp, the code to replace is different.

Open layouts/template.php in your text editor. If you want to remove the original menu, delete this code:

<?php if ($this['modules']->count('menu + search')) : ?>
<div id="menubar" class="clearfix">
				
	<?php if ($this['modules']->count('menu')) : ?>
	<nav id="menu"><?php echo $this['modules']->render('menu'); ?></nav>
	<?php endif; ?>

	<?php if ($this['modules']->count('search')) : ?>
	<div id="search"><?php echo $this['modules']->render('search'); ?></div>
	<?php endif; ?>
				
</div>
<?php endif; ?>

To add UberMenu, add this code:

<?php if( function_exists( 'uberMenu_direct' ) ) uberMenu_direct( 'ubermenu' ); ?>

Adapted from this tutorial. Please note, since this theme does not follow standard WordPress best practices, I do not know if this is a best-practice for customizing a YooTheme theme.

WP Foundation ( 320press / Zurb )

UberMenu won’t work at all with WP Foundation out of the box because WP Foundation strips out core menu item classes, which is something a theme should never ever do.

Since the menu classes are no longer present, UberMenu is unable to style the menu. To fix this, we need to stop Foundation from stripping these classes.

Here is the offending code in wp-foundation/functions.php

// change the standard class that wordpress puts on the active menu item in the nav bar
//Deletes all CSS classes and id's, except for those listed in the array below
function custom_wp_nav_menu($var) {
        return is_array($var) ? array_intersect($var, array(
                //List of allowed menu classes
                'current_page_item',
                'current_page_parent',
                'current_page_ancestor',
                'first',
                'last',
                'vertical',
                'horizontal'
                )
        ) : '';
}
add_filter('nav_menu_css_class', 'custom_wp_nav_menu');
add_filter('nav_menu_item_id', 'custom_wp_nav_menu');
add_filter('page_css_class', 'custom_wp_nav_menu');
 
//Replaces "current-menu-item" with "active"
function current_to_active($text){
        $replace = array(
                //List of menu item classes that should be changed to "active"
                'current_page_item' => 'active',
                'current_page_parent' => 'active',
                'current_page_ancestor' => 'active',
        );
        $text = str_replace(array_keys($replace), $replace, $text);
                return $text;
        }
add_filter ('wp_nav_menu','current_to_active');
 
//Deletes empty classes and removes the sub menu class
function strip_empty_classes($menu) {
    $menu = preg_replace('/ class=""| class="sub-menu"/','',$menu);
    return $menu;
}
add_filter ('wp_nav_menu','strip_empty_classes');

To resolve this, we’ll add the following code to our child theme’s functions.php

add_action( 'init' , 'ubermenu_fix_foundations_bad_practices' );
function ubermenu_fix_foundations_bad_practices(){
	remove_filter('nav_menu_css_class', 'custom_wp_nav_menu');
	remove_filter('nav_menu_item_id', 'custom_wp_nav_menu');
	remove_filter('page_css_class', 'custom_wp_nav_menu');
	remove_filter('wp_nav_menu','current_to_active');
	remove_filter('wp_nav_menu','strip_empty_classes');
}

I’ve created a sample child theme that includes this code, so you can just install it if you like

Download Foundation Child Theme

FlyingNews (J&W Templates)

FlyingNews creates residual styling (see also: residual styling troubleshooting guide) issues. Here’s a child theme that will fix them – just install this theme on your site.

Download FlyingNews Child Theme

Cherry (bdayh)

Cherry – Responsive News and Magazine Theme by bdayh creates some residual styling, residual scripting, and a double menu when integrated with UberMenu. To resolve this, we can replace the entire menu in Cherry with UberMenu Direct.

1. Open the theme’s header.php

2. You’ll see this code:

<?php $stick = ''; ?>
<?php if( bdayh_get_option( 'stick_nav' ) ) $stick = 'class="fixed-enabled"' ?>
  <nav id="cherry-nav" <?php echo $stick; ?>>
    <div class="content">
      <?php if ( has_nav_menu( 'nav' ) ) { ?>
      <?php  wp_nav_menu ( array( 'menu_class' => 'menu','cherry'=> 'ul', 'theme_location' => 'nav' )); ?>
      <?php } else { ?>
      <ul class="menu">
        <li class="home <?php if (is_home()) {echo "current-page-item";} ?> ">
          <a href="<?php echo home_url(); ?>">
          <?php _e('Home', 'cherry'); ?>
          </a>
        </li>
        <?php wp_list_categories(array(
            'title_li' => false,
            'hierarchical' => 1
          )); ?>
      </ul>
      <?php } ?>
    </div>
  </nav>

3. Remove that code and replace it with

<?php
if( function_exists( 'uberMenu_direct' ) ){
  uberMenu_direct( 'nav' );
}
?>

4. UberMenu should now be properly integrated.

Redux (Orman Clark)

Redux is great, it just requires some residual styling removal

1. Open the theme’s header.php. Locate this line:

   <!-- BEGIN #primary-nav -->

2. In the line below, change the ID of the #primary-nav div to uber-nav, so you have this:

   <div id="uber-nav">

3. This removes the residual styling.
4. By default, the menu will be full width and sit below the site title. If you would like the menu to appear in the original
   theme menu’s location, add this code:

   #uber-nav {
       margin-bottom: 40px;
       float: right;
       margin-right: -10px;
   }
   

Xtreme One

Xtreme One does not support WordPress Navigation Menu Theme Locations, so it can’t work with UberMenu out of the box. However, it implements a nice hook system, so we can easily remove the default nav system and replace it with UberMenu Easy Integration

1. Add this to the blank child theme’s functions.php:

   function um_override_xtreme_setup_theme_nav() {
       $pri_nav = _xtreme_primary_nav_position();
       remove_action($pri_nav['hook'], '_xtreme_primary_navigation', $pri_nav['priority']);
       add_action($pri_nav['hook'], 'uberMenu_easyIntegrate', $pri_nav['priority']);
   }
   add_action('xtreme_setup_theme', 'um_override_xtreme_setup_theme_nav', 50);
   

2. Activate UberMenu Easy Integration via Appearance > UberMenu > Theme Integration > Easy Integration
3. Activate Strict Mode via Appearance > UberMenu > Theme Integration > Strict Mode
4. In Appearance > Menus, Activate the UberMenu Theme Location by checking the Uber Menu checkbox in the Activate Uber Menu Locations meta box and clicking Save
5. Set your desired menu in the “UberMenu” menu theme location in the Theme Locations meta box and click Save

Note, the UberMenu v3 integration code would look like this:

function um_override_xtreme_setup_theme_nav() {
    $pri_nav = _xtreme_primary_nav_position();
    remove_action($pri_nav['hook'], '_xtreme_primary_navigation', $pri_nav['priority']);
    //add_action($pri_nav['hook'], 'uberMenu_easyIntegrate', $pri_nav['priority']);
    add_action($pri_nav['hook'], 'um_insert_menu', $pri_nav['priority']);
}
function um_insert_menu(){
	ubermenu( 'main' , array( 'theme_location' => 'ubermenu' ) );
}
add_action('xtreme_setup_theme', 'um_override_xtreme_setup_theme_nav', 50);

Your Inspiration Themes (YIT) [Bazar,Room09]

This solution is known to work with multiple, if not all, YIT themes. Including: Room09 , Bazar

The YIT framework introduces major residual styling (see also: residual styling troubleshooting guide) and residual scripting into the menu system.

All we need to do is change the id=”nav” to id=”nav-uber”, but since the menu is not printed directly in the header.php, we can’t use the normal WordPress template system to just override the header template. Instead, we can use YIT’s template system to provide our own replacement nav template. Here’s what needs to be done:

1. Create a child theme for the YIT theme with style.css, functions.php, and yit_header.php template
2. Create our own yit_header.php template which will replace the default YIT header template – copy the theme/templates/header/header.php into the new header. This template will contain a single modification – change id="nav" to id="nav-uber"
3. Override the pluggable yit_header() function so we can replace the template with our own. Add this code to the child theme’s functions.php:

   function yit_header() {
       require_once( 'yit_header.php' );
   }
   

4. Activate the child theme and set a menu in the theme location in Appearance > Menus

Bazar-specific Instructions

1. Activate the Bazar Child Theme (don’t forget you’ll need to re-assign/activate your menus). It already contains most of the files you need.
2. Copy bazar/theme/templates/header/header.php from the parent theme into the main directory of the child theme (bazar-child/) and rename it yit_header.php.
3. Find this code in yit_header.php: id="nav" and change it to id="nav-uber"
4. Add this PHP to your bazar-child/functions.php file to override the pluggable yit_header() function so we can replace the template with our own. Add this code to the child theme’s functions.php:

   function yit_header() {
    require_once( 'yit_header.php' );
   }
   

5. If your submenu is obstructed by the slider, you can add this CSS to layer the menu on top:

   #header{
   	position:relative;
   	z-index:20;
   }
   .revolution-wrapper{
   	position:relative;
   	z-index:10;
   }
   

Room09

For the Room09 theme, I’ve created a child theme that does all of this for you. Just install and activate it, then set up your menu as usual.

Download the Room09 Child Theme

The same child theme would work for any YIT framework theme, you’d just need to adjust the style.css to work with the relevant theme.

Libra by Sara_p

UberMenu integrates easily with Libra, but there is some significant residual styling because the menu styles are based on the #nav ID, which is not set via wp_nav_menu. All we need to do is change the id=”nav” to id=”nav-uber”, but since the menu is not printed directly in the header.php, we can’t use the normal WordPress template system to just override the header template. Instead, we can use Libra’s template system to provide our own replacement nav template. Here’s what needs to be done:

1. Create a child theme for Libra
2. Create our own topbar.php template which will replace the default Libra template. This template will contain a single modification – change id="nav" to id="nav-uber"
3. Override the pluggable yit_topbar() function so we can replace the template with our own. Add this code to the child theme’s functions.php:

   function yit_topbar() {
       require_once( 'topbar.php' );
   }
   

4. Activate the child theme and set a menu in the theme location in Appearance > Menus

I’ve created a child theme that does all of this for you. Just install and activate it, then set up your menu as usual.

Download the Libra Child Theme

Gravity Forms

You can add Gravity Forms to your UberMenu by inserting a Gravity Forms shortcode into an UberMenu Content Override field.

Placement

1. In order for your form to appear in a submenu, you will need to attach it to a second level menu item – NOT a top level menu item. In some cases, a third level menu item might be appropriate.
2. If you do not want the menu item’s Navigation Label to appear above the form, check the Disable Text option on that item

Formatting

1. For optimal formatting, place the Gravity Form in a Full Width Submenu with an explicit column number set. This gives the form a specific width to conform to and allows the form to display better. Otherwise, you may want to add a bit of custom CSS to set a width on the form to make it expand properly
2. Depending on your form, you may wish to add some minor CSS tweaks to get the form “just right” within your menu

Compatibility

To maximize compatibility/minimize interference between the two plugins, disable two options in UberMenu > Theme Integration

Disabling these settings will prevent UberMenu’s javascript and CSS from directly affecting the form

Other suggestions

1. Keep in mind that on a page refresh, your submenu won’t automatically re-open. If you want your users to see the confirmation or error message after submitting the form, consider putting your form into AJAX mode

Default Featured Image plugin

If you are using the Default Featured Image plugin, it will automatically add images to your menu items. The plugin should probably offer a way to exclude certain post types, but you can do that programmatically with this code:

function dfi_no_image ( $dfi_id, $post_id ) {
  $post = get_post($post_id);
  if ( 'nav_menu_item' === $post->post_type ) {
    return 0; // the image id
  }
  return $dfi_id; // the original featured image id
}
add_filter( 'dfi_thumbnail_id', 'dfi_no_image', 10, 2 );

A good place to add this would be your child theme’s functions.php

CSS Stylesheets

basic.css

Contains the structural styles for UberMenu.

{skin}.css

Contains the styles for each skin. One of these is included when you set a skin preset.

custom.css

Make your customizations here!

The custom.css file is the only stylesheet you should be editing. Copy the custom-sample.css file to custom.css, then start customizing. ubermenu/custom/custom.css is included when the Style Application is set to Custom

Javascript

ubermenu.min.js

This is the main UberMenu functionality for the site. It is loaded when ‘jQuery Enhancements’ is enabled. It is minified.

ubermenu.dev.js

This is the non-minified, development version of ubermenu.min.js.

ubermenu.admin.js

This controls UberMenu backend functionality.

hoverIntent.js

Loaded when you set the trigger to “Hover Intent”.

colorpicker.js

Loaded in the UberMenu control panel to create color pickers.

demo.js

Used for demo purposes only.

The menu styles don’t look like the demo

This means that your theme’s menu styles are affecting UberMenu adversely. Usually, the easiest fix is to simply change the ID or class of the containing div (the one surrounding #megaMenu, or in your code the one surrounding wp_nav_menu()). Otherwise, you can delete the menu styles from your theme’s CSS. A third option is to counteract the styles using custom CSS.

Please refer to the following guides on troubleshooting and resolving this issue with your theme.

Removing Residual Styling Support Guide Residual Styling Troubleshooting Guide

Conflict with theme’s responsive menu

Many responsive themes use the “responsive select menu” paradigm to display their responsive menus. This means that the theme actually prints two menus, and uses CSS media queries to only display one at a time.

By calling wp_nav_menu twice with the same theme_location parameter, the theme produces two menus, only one of which will become an UberMenu. The second is now superfluous.

Here’s what the setup usually looks like:

<div id="nav">
    <?php 
    // this is the menu you'll see at widths greater than 960px
    wp_nav_menu( 'theme_location' => 'main_menu',  'container_class' => 'main-menu-standard' );
 
    // this is the menu that will be displayed on mobile devices
    wp_nav_menu( 'theme_location' => 'main_menu',  'container_class' => 'main-menu-responsive', 'walker' => 'responsive_walker' ); 
    ?>
</div>

Several situations may arise, depending on how the theme has setup its responsiveness:

1. Both menus may be displayed at small sizes
2. UberMenu may be hidden by the theme at small sizes
3. UberMenu may be hidden at full size

You have three options to resolve this:

1. Using only UberMenu

UberMenu is already responsive, and does not require an additional menu. If you wish to use UberMenu’s responsive capabilities, you’ll need to find the secondary (responsive) wp_nav_menu call (normally in your theme’s header.php), and remove it. Now you’ll have a single menu controlled entirely by UberMenu. Be sure to remove any residual styling (see also: residual styling troubleshooting guide) in the process.

2. Using UberMenu with the theme’s responsive menu

If you want to use UberMenu for wider screens and the theme’s responsive menu for mobile devices, you’ll need to do two things:

1. If your responsive menu is printed first, and you aren’t getting an UberMenu at all due to the wp_nav_menu function being called twice with the same theme_location parameter, replace the wide-screen wp_nav_menu call with UberMenu Easy Integration. This creates a separate theme_location (called “UberMenu”), which we will activate – and then deactivate the theme’s standard theme_location.
2. You’ll then (likely) need to apply CSS to hide UberMenu ( #megaMenu{ display: none; } or .main-menu-standard{ display: none; } ) for the appropriate size/media query. This will vary based on your theme, so it’s easiest to base it on the original menu’s media queries (switch off UberMenu and observe the breakpoints using Firebug or Chrome Developer Tools.

3. Use UberMenu + Responsive Select Menu

You can also use UberMenu with my (free) Responsive Select Menu plugin. Again, you’d remove the second wp_nav_menu call, then just follow the instructions to set up the Responsive Select Menu at the appropriate breakpoint (no coding required, you can do this in the Responsive Select Menu Control Panel). See a demo here

Submenus are not being sized properly

This generally indicates that you have a javascript error that is preventing UberMenu from running its script. To troubleshoot this, install Firebug or use Chrome Developer tools (F12 in Chrome) and load the page with Firebug activated. Look at the console for any javascript errors. Here is an example:

The errors above are unrelated to UberMenu, but prevent it from working properly. Most often, these types of errors result from poorly coded Plugins or Themes. They need to be resolved.

Javascript Error Troubleshooter

Can UberMenu take on the styles of my theme’s menu?

No. Not automatically, at least.

As stated in the UberMenu product description

UberMenu will not automatically adopt the style of your theme, unless your theme has an UberMenu-specific stylesheet. You’ll need to customize the styles on your own to recreate it if that’s what you want

Why?

UberMenu replaces your existing menu, to create a mega menu instead of a flyout menu. The theme’s menu styles include not only colors, fonts, etc, they also include positioning and sizes for submenus – you can’t merge the two without breaking the mega menu functionality. In fact, when the theme’s styles continue to affect the menu after UberMenu is activated, this is known as residual styling and needs to be eliminated.

I still want my menu to look like my theme and not like UberMenu

You have several options to customize UberMenu as you like.

Please understand that as these are customizations, we cannot offer support for this in the forum (what is supported?). If you need customization assistance, consider contacting a trusted freelancer.

Use an existing similar skin

UberMenu includes over 20 preset skins, and there are additional skins available for purchase in the UberMenu Skin Packs, such as the flat skin pack. You can test out all the available skins in the demos.

If you find an existing skin that is similar to your theme’s, you can simply tweak it with custom CSS

The Sample Custom Skin can be useful as well.

Use the Customizer

If you’d like a WYSIWIG experience where you can set colors, font sizes, etc, through the Control Panel, use the Customizer interface to create a similar style.

Write a Custom Skin

If you want full control over how your menu looks, you can Create a Custom Skin. You can either write it from scratch or base it on an existing skin.

If you are familiar with LESS, you can Custom Skins with LESS

How to remove the arrow submenu indicators (triangles)

The submenu indicator arrows (triangles) provide a visual queue to the user that there is more content to be revealed.

Remove the arrows from items with no submenu

Arrow submenu indicators are added when one of two conditions are met:

1. The Activate Mega Menu option is checked on a top level menu item.
2. A flyout menu (Activate Mega Menu is unchecked) has child items

If you have top level menu items with no submenus and want to remove the arrows, simply uncheck Activate Mega Menu on those menu items

Don’t forget to hover over the ? tooltips for in-plugin documentation!

Remove the arrows entirely

The arrow indicators are added using CSS :after pseudoclasses. To remove them add this CSS:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg > li.megaReg-with-sub > a::after, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a::after, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a::after, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator::after, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator::after, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator::after{
  display:none;
  border:none !important;
}

And to remove them from IE8, which does not support the ::after CSS3 pseudoclass, but only the `:after` CSS2 pseudoclass, you may need to add this as well:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg > li.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.megaReg-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after{
  display:none !important;
  border:none !important;
}

You can then adjust the right-padding if you wish using these selectors: http://wpmegamenu.com/customizer/#top-level-a

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg ul.sub-menu li.menu-item.megaReg-with-sub > span.um-anchoremulator, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a, 
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a, 
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator{
  padding-right:10px;	
}

Menu Item Save Limit

Please note that this is not an UberMenu issue. It is a server configuration issue. Unfortunately, there is nothing UberMenu can change to fix the issue. You’ll have to work out the solution to remove the POST vars limitation on your server or with your host. Hopefully this FAQ will point you in the right direction.

Some users will experience a limit to the number of items they can add to their menu. Unfortunately, this manifests as all menu items after the first X (X may be 16, 72, 270, or any number), and the rest will be lost.

This limit is NOT imposed by UberMenu. The limit is actually a server configuration issue. There are two common server configuration issues that can cause this problem.

For an in-depth analysis of this WordPress/PHP issue, please refer to my detailed article on the subject: The WordPress Menu Item Limit or: Help! Half my menu items just disappeared!

1. max_input_vars

As of PHP 5.3.9, there is a new PHP ini directive called max_input_vars (which does the same thing as Suhosin’s post.max_vars, below). By default, max_input_vars is set to 1000, which can easily be reached with the WordPress menu system. The solution is to add the following to your php.ini:

max_input_vars = 5000;

(you might start by trying 3000)

Alternatively, you can try placing this in your .htaccess. This won’t work on some servers, so your mileage may vary.

php_value max_input_vars 3000

2. Suhosin

This issue can also occur due to a program called Suhosin which runs on your server. This is a known issue with WordPress, and affects both the standard WordPress Menu System, as well as UberMenu, which is built on top of that system.

In most cases, the solution is as simple as asking your host to increase the max_vars variables in your php.ini.

suhosin.post.max_vars = 5000
suhosin.request.max_vars = 5000

Here are some resources that should be useful for you:

1. Can’t add more menu [items] to WordPress custom menus
2. WordPress Trac Ticket detailing the issue

Note that it is inadvisable to have more than 100 menu items on a page for SEO reasons.

If you don’t have access to php.ini

If you’re on shared hosting, you may not have access to the php.ini. In most cases, it is best to contact your host to have them change these values if you are not able to do so yourself. However, on some hosts you can adjust these values in files that you have access to. If these solutions do not work and you do not have access to your php.ini, you’ll need to contact your host to make the changes.

.htaccess

Though many disable it, some hosts will allow you to place PHP directive overrides in the .htaccess file

php_value max_input_vars 3000

.user.ini

If you have a .user.ini file, you can add the following to override the default php.ini value

max_input_vars = 5000;

Menu Items Lost / Disappeared

If your menu items have disappeared from the Appearance > Menus panel, this means that they have been deleted from the database. This doesn’t just happen spontaneously, it has to be triggered by something.

Remember, menu items are created and stored by WordPress core in the WordPress database; UberMenu does not alter this process, it just stores extra data for these menu items. Losing menu items is not an indication of an issue with UberMenu. It is almost always indicative of a PHP configuration issue with your server

Double check you’re viewing the right menu

The first thing to check is that you are viewing the proper menu in Appearance > Menus. Remember that you can create multiple menus the Menus panel. Ensure that you are viewing the proper menu, that it is assigned to the appropriate Theme Location, and that that Theme Location is activated for UberMenu.

Menu Item Limit – items lost upon menu save

If your items are lost after clicking Save on the Appearance > Menus Panel, there is a very high likelihood that you are experiencing a Menu Item Save Limit. This is an issue with your server configuration, and not something that UberMenu can control. Fixing the issue can be pretty simple, but the menu items can’t be recovered unless you have a backup.

This article describes the menu item limit issue, which affects WordPress menus with or without UberMenu, in extreme detail.

Database corruption

It is possible, though very rare, that you may have some type of database corruption. This might occur if another plugin/theme mistakenly deletes data from the database, or if you have some sort of infection/malware on your server that has corrupted your database tables. There is a slight possibility that running a MySQL database repair may help. You can speak to your server admin regarding how to run that process.

While this is very rarely the case, it is something worth considering if you have ruled out the Menu Item Limit issue.

Can I recover the menu items?

If your items don’t appear in Appearance > Menus due to a Menu Item Save Limit scenario, they have been deleted from the database and no longer exist. If you don’t have a database or server backup, there is no way to recover them.

Database backups

If you have a professional webmaster running your site, they are almost certainly running nightly or at least weekly backups of your database. In this case, recovering your menu items is as simple as restoring the most recent database backup from before the items were deleted. This will revert your site to its state at that point in time.

If you are not running backups on your WordPress site, you should start now. It’s very simple. One easy way to get started is with the Backup to Dropbox plugin.

Server backups

If you haven’t been backing up your database, you may have server image backups. Depending on your host and plan, this may be something you/your server admin has set up, or it may be something your hosting company does automatically. If there is a server backup, you can restore to that point in time, as it should contain a database snapshot as well. After restoring a backup, don’t forget to properly configure your server so that the issue does not recur.

This is something that varies widely from host to host, so you’ll need to discuss it with them or your server administrator.

How can I have a different menu on a specific page?

You can only have one UberMenu per page, but you can have multiple UberMenus on your site, provided they never occur on the same page. The real limiting factor to the number of UberMenus you can have is your number of Theme Locations.

Please keep in mind that settings in the UberMenu Control Panel are global, so while you can have different menu contents on different pages, they will all share the same orientation, animations, styles, etc.

To easily swap out different menus on specific pages, you can use my free Menu Swapper plugin. This plugin allows you to register new theme locations and then change out the theme location on any Page, Post, or Custom Post Type in WordPress (it won’t help on archive or taxonomy pages), without having to write any code.

Get the Menu Swapper

Are you looking just to change individual menu items on a specific page, or within a specific category? Check out the UberMenu Conditionals Extension

Caching Plugins – Menu intermittently displays as unstyled list or default menu

Recommended: If you are using a caching plugin, you should disable the Default to theme menu in IE6 setting in the UberMenu Control Panel > Theme Integration. You don’t want your caching plugin to cache a non-UberMenu version of the page. (Don’t forget to clear the server cache after changing the setting).

If you have disabled the Default to IE6 setting and are still having issues, read on

Some users have reported issues with caching plugins such as W3TC (W3 Total Cache). The symptom is that the menu is intermittently displayed as an unstyled list on cached pages.

I’ve investigated this issue, and the cause is that the page caching program has not cached the UberMenu markup in the static cache file – instead, it seems to revert to either the theme’s markup, or some default markup for the menu, thereby resulting in the unstyled list of menu items.

In other words, UberMenu is not being displayed at all. Codewise, UberMenu’s display is a combination of two things: HTML and CSS. The CSS (stylesheets) are still loaded; however, the static cached page does not display the UberMenu-generated HTML markup. As a result, there is nothing for the CSS to style (the elements which the CSS targets do not exist). The menu being displayed is not UberMenu at all, and that is the problem.

To my knowledge, there is nothing UberMenu can do to change how the caching plugin chooses to cache the page. UberMenu follows all of the WordPress standards to create the menu markup (via filters and custom navigation walkers).

Please note: I am not sure if this is an issue with the caching plugin itself, the underlying server caching modules, or with the way the plugin has been configured on a particular site. It takes some expertise to properly configure a caching plugin.

For help with caching issues, I recommend contacting the author of the caching plugin, as they will certainly have better insight into how the caching works. If there are any recommendations that will help the menu and caching plugin be more compatible, I am certainly willing to consider them.

Potential Solution 1: Dynamic Caching

One potential solution is to use the caching plugin mfunc functionality. For example, in WP-Super Cache this may help (different plugins may use different syntax, check your caching plugin’s documentation for details on “dynamic caching”)

<!-- mfunc wp_nav_menu( $args ); --> 
<?php wp_nav_menu( $args ); ?>
<!-- /mfunc --> 

Note that $args may be a variable or an array, and it is my understanding that both the code after the mfunc and within the PHP tags must match.

Potential Solution 2: Direct Integration (UberMenu v2.3+)

Another possibility is that the caching plugin may not be capturing filtered values properly. Using direct integration bypasses the menu argument filters, so if this is the problem it should alleviate it. Replace your existing wp_nav_menu() call with

<?php if( function_exists( 'uberMenu_direct' ) ) uberMenu_direct( 'primary' ); ?>

Where ‘primary’ is your theme location handle/ID/slug. That means that whatever the value for ‘theme_location’ is in your theme’s wp_nav_menu arguments array should be passed to the uberMenu_direct function.

Example:

/* Replace this */
wp_nav_menu( array(
  'theme_location' => 'main', // "main" is the value you need in this case
  'container_id' => 'nav-menu'
));

/* with this */
if( function_exists( 'uberMenu_direct' ) ) uberMenu_direct( 'main' );

Alternatively, if you have UberMenu Easy Integration enabled in your control panel, you can use

if( function_exists( 'uberMenu_direct' ) ) uberMenu_direct( 'ubermenu' );

Recommended: If you are using a caching plugin, you should disable the Default to theme menu in IE6 setting in the UberMenu Control Panel > Theme Integration. You don’t want your caching plugin to cache a non-UberMenu version of the page.

For now, if you experience this issue and the above does not help, the recommended solution is to disable caching.

Menu items that don’t link to another page?

You can create “dummy” menu items by using the hash tag. Just create a custom menu item (as of WordPress 3.6 these are renamed “Links” in the Appearance > Menus screen) and set the URL to #. Then check Disable Link in the UberMenu Item Options.

This technique can also be used to create dummy column headers by adding the “Disable Text” option as well.

Open a menu item link in a new window

This is actually a built-in WordPress feature.

1. In the Appearance > Menus screen, click Screen Options in the upper right.

   

2. Then, under Show advanced menu properties, check “Link Target”

   

3. Then check the “Open link in a new window/tab” option on your menu item

   

Overview

Create a nofollow link

If you want to create a nofollow link within your UberMenu, this is actually a core piece of WordPress menu functionality – this isn’t part of UberMenu. Just activate the menu Link Relationship (XFN) field and set the value to nofollow

Is there a developer/multi-use license?

First, I’d just like to say thanks to everyone who has repeatedly purchased UberMenu – I truly appreciate your business!

Many customers have inquired about being able to use UberMenu on multiple sites. Currently, Envato (CodeCanyon) only offers a single-use license. I would love to see a developer’s license or volume pricing available, but that has not yet become a reality.

I have petitioned for multi-use licenses in the past, but unfortunately there have not been any changes yet. As Envato is currently in the midst of a multi-stage license revamping, recent developments have suggested that Envato may be considering adding a developer’s license, but at this point there is no confirmation on that.

So what are my options for using UberMenu on multiple sites?

For now, the only option is to purchase an individual Regular License for each site on which UberMenu will be used. I do apologize for the inconvenience of having to purchase individual licenses, I know it can be frustrating for those purchasing in bulk. I hope Envato will provide a better solution for this in the future. At the moment, my hands are tied.

I have heard recently that in some cases Envato will work directly with customers who wish to purchase large quantities of a plugin, through Envato Support. It would make more sense that they just implement a cart, but in the meantime if you are looking to purchase a large number of licenses (>100), that may be a possibility.

Can’t I just pay you directly for a developer’s license?

Unfortunately, no. My exclusivity agreement with CodeCanyon means that I can only distribute UberMenu through them. Making a side-deal would break that contract and jeopardize my standing with Envato.

What about the Extended License?

A common misconception is that Envato’s Extended License allows for unlimited usage of a plugin. This is incorrect. The Extended License is a single-use license with an extra provision for redistribution. It is not applicable to customers wishing to use a product on multiple projects, whether for themselves or clients.

Hold on, you’re saying I can only use UberMenu once?

Some customers have overlooked that the CodeCanyon Regular License entitles the purchaser to a single installation.

From the licensing terms:

You are licensed to use the Item to create one single End Product for yourself or for one client

That means that for every WordPress site that you have UberMenu activated on, you need to purchase an individual Regular License. 1 site = 1 license, 2 sites = 2 licenses, 3 sites = 3 licenses, etc. It does not matter if they are all in use by the same company, on the same server, by the same developer, etc. The license terms are single use – one license per site. This is part of why the price for the product is so inexpensive.

If you’ve been using UberMenu on multiple sites with a single license, don’t worry; just go ahead and purchase the proper amount of licenses now. Thank you for your repeat business!

I switched themes and UberMenu stopped working.

Each theme registers different theme locations in which to place the menu. If your new theme still supports WordPress 3 Custom Menus, all you’ll need to do is go back to Appearance > Menus, set your menu to the new Theme Location and activate that location with UberMenu (setup instructions steps 6-7). If your new theme does not support WP3 Menus, you’ll need to use easy integration.

Why don’t I have any UberMenu Widget Areas available?

To keep your control panel as tidy as possible, UberMenu Widget Areas are not enabled by default. To enable them, navigate to Appearance > UberMenu and enter an integer greater than zero in the Number of Widget Areas box. Save the options and you will see UberMenu Widget Areas appear in the Widgets control panel.

Please review the Adding Widgets to UberMenu instructions.

Please note that adding widgets to top level menu items is a separate process, since this is almost never what is really needed: Top-Level Widgets

Sub menus are being hidden behind other content

This is usually a z-index issue with your theme’s container divs. There is a simple fix, but it must be applied to the appropriate containers. Specifically, the adjacent containers of the overlapping elements.

Please refer to the troubleshooting guide:

Submenus not displaying troubleshooting guide

Why does Internet Explorer want to destroy my life?

I know, it’s awful.

Check out the full Internet Explorer Troubleshooting Guide for dealing with issues in IE8, IE9, and IE10.

Please note that IE7 is not a supported browser.

Can the submenu push down the other content on my site?

In short, no.

UberMenu is a semantically hierarchical menu. That means that submenu items are actually child elements of their parent nodes in the HTML markup / DOM. In other words, the structure is like this

<ul>

  <!-- Top Level Menu Item -->
  <li>
    <a>Top Level Item (First Level)</a>

    <ul>

      <!-- Second Level Menu Item -->
      <li>
        <a>Submenu Header (Second Level)</a>

        <ul>

          <!-- Third Level Menu Item 1 -->
          <li>
            <a>Submenu Item 1 (Third Level)</a>
          </li> 
          <!-- end Third Level Menu Item 1 -->

          <!-- Third Level Menu Item 2 -->
          <li>
            <a>Submenu Item 2 (Third Level)</a>
          </li> 
          <!-- end Third Level Menu Item 2 -->

        </ul>

      </li>
      <!-- end Second Level Menu Item -->

    </ul>

  </li>
  <!-- end Top Level Menu Item -->

</ul>

This structure is very important because the semantics of the markup allow search engine spiders to properly index your site’s content and know how pieces of content are related to one another. In other words, this standard menu markup makes the menu SEO-friendly.

As a result, submenus must be positioned absolutely (otherwise they would visually appear inside their parent items), and therefore they will not displace other items on your page.

In short:

1. UberMenu is semantically hierarchical for SEO purposes
2. That means child item elements are actually contained within parent item elements
3. Therefore submenus must be absolutely positioned, or else they would simply stretch the top level menu items when displayed
4. Absolutely positioned elements are taken out of the flow of the document, and therefore cannot displace other elements on the page (they will overlap them)
5. Since the submenus can’t displace other items on the page, the submenus cannot push down content on your site

In shorter: Submenus can’t push down content because they’re absolutely positioned, which is necessary due to UberMenu’s SEO-friendly properties

But I still wanna do it anyway

When I say it isn’t possible to push down the content, what I mean is it isn’t possible to do so using natural HTML/CSS layouts. It’s always best to have the layout of your site be dictated by the natural flow of the elements – this is especially important with responsive content, when dimensions can change dynamically; there’s no way to accomplish it that way, so I don’t recommend it.

If you’re really hell-bent on this effect, you can brute-force mimic it with some custom javascript. The easiest way to accomplish this will be to set a fixed height on all of your submenu ULs. Then, when the menu is opened, you’ll want to add a margin or padding to the top of your content div (in the theme) to slide the content down. This is the lightest-weight way to accomplish the effect, though the structure is not very flexible (all submenus should be the same height to make it simple), and you’ll have to consider how to handle responsiveness.

Useful resources:

UberMenu 3

• UberMenu 3 Javascript API

UberMenu 2

• UberMenu Customization Assistant
• Javascript API Functions

If you need assistance with customizations, WP Kraken is available for hire.

Debugging

If you run into a PHP error, for example, an Internal Server Error, you’ll need to enable debugging on your WordPress site in order to identify the error in a meaningful way. To do so, edit your wp-config.php file as described here. Replace the part that normally sets WP_DEBUG to FALSE with

/**
 * This will log all errors notices and warnings to a file called debug.log in
 * wp-content (if Apache does not have write permission, you may need to create
 * the file first and set the appropriate permissions (i.e. use 666) ) 
 */
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);
@ini_set('display_errors',0);

Now re-do whatever caused the error, and then check the debug.log file (again, don’t forget to make sure the server can write to it!)

The debug log normally gives a pretty clear explanation of the issue. The most common issues will be resolved by configuring your server properly, normally by increasing the memory_limit or max_execution time.

Memory Limit

Some users may experience a memory limit error. This means that your WordPress installation (core + theme + plugins) have overrun the memory limit allowed by your server. The error looks like this:

Fatal error: Allowed memory size of XXXXXXX bytes exhausted (tried to allocate XXXXX bytes) in /path/to/function/file on line XXX

Tip: You can check your PHP configuration settings by viewing the output of the phpinfo() function

The solution is to increase the PHP memory limit on your server. There are several potential ways to do this:

1. php.ini

Your server has a PHP initialization file (php.ini). To increase your memory, you change the memory_limit directive. Usually 64MB or 128M is a good amount.

memory_limit = 64M

The error message will indicate how many bytes (translate this to MB using Google if needed) your current system has allocated, and you can use this as a basis for how much you increase your limit.

2. wp-config.php

WordPress offers a way to Increase memory allocated to PHP in your wp-config.php file.

3. Contact your host

Depending on your host, you may or may not have access to php.ini, and they may disallow the wp-config.php solution. In that case, you will need to contact them directly to resolve the issue. If they refuse to increase your memory limit, you’ll either need to change your hosting plan or lighten your plugin/theme load to reduce the memory requirements of your installation.

Please note that this is not a problem with UberMenu – the available memory is shared among all plugins, theme, and WordPress core running in your installation. As the different parts of your installation load, they use up your server’s capacity. The error simply occurs on the function that happens to send it over the limit. Often the function that puts it over the top is only a few kilobytes.

Menu flashes unstyled list before styles load

If your menu briefly appears as a list before the actual menu styles load, this means that your stylesheets are loading after your menu’s HTML markup.

The layout of a website works like this:

<html>

   <head>

      /* Stylesheets go here */

   </head>

   <body>

      /* Page elements go here */

   </body>
</html>

By loading the stylesheets before the elements that they style, you ensure that the elements are immediately styled as intended.

If you load the stylesheets AFTER the markup for the elements that they style, the elements are rendered with their default layouts until the CSS loads.

With UberMenu, you need to make sure that the ubermenu.css (UberMenu 3) or basic.css (UberMenu 2) as well as the skin you are using load in the head of your site.

If you view your site’s source and then search for UberMenu’s ubermenu.css, if it isn’t inside the head tags then it is in the wrong place.

Why would the stylesheets load after the menu?

Where your stylesheets are printed depends on your theme and can depend on other plugins. UberMenu registers the stylesheets, and your theme prints them by calling wp_head(), which should always be located in your site’s head.

The most likely scenario that results in your stylesheets ending up in your footer is that you have a caching or minifaction plugin running which moves your assets to the footer. In this case, you need to configure your caching plugin properly so that your stylesheets load in the header where they should be. The configuration settings will be specific to that plugin/theme, and you should consult the documentation of those products for how to properly configure them.

As a sidenote, it’s okay to load your javascript in the footer, and UberMenu’s scripts will load in the footer by default. Again, this can be changed by the theme or other plugins.

Is there a non-WordPress version?

No. Or at least not yet. UberMenu is exclusively for WordPress currently.

Can I use it on a non-WordPress site?

In theory, yes. But it is a customization you will take on that we can’t assist with.

Licensing

Legally, your purchase of a single regular license will allow you to use UberMenu on a single site – whether that site is WordPress or not is irrelevant. So there is no issue there as long as you follow the licensing terms (single site, no redistribution, etc).

Practicalities

Since UberMenu just uses WordPress to produce HTML, CSS, and JS served to the user, these generated assets are able to be used on any site. However, extracting those assets and adapting them to non-WordPress sites is not necessarily straightforward or simple. Whether or not you can accomplish this successfully will depend on your own skill as a developer. It’s not a project I recommend undertaking for the casual WordPress user.

Support and Guidance

There is no support provided for using UberMenu outside of its intended environment – WordPress. We cannot assist with integration into non-WordPress sites.

As general advice/guidance – I would suggest setting up a WordPress site, allowing the menu to generate your HTML markup, then copying the HTML, JS, and CSS to your non-WordPress site and customizing from there. Note you’d have a lot of WordPress-specific stuff in there, so this isn’t necessarily recommended.

How to remove the CSS3 Transitions

UberMenu 2.0 includes some CSS3 transitions that make things smoother in modern browsers, for example the top level menu item tabs on hover. You’ll notice these effects in Chrome and Firefox, but not older versions of IE. If you wish to remove these transitions, add this CSS:

#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > a:hover{
  -webkit-transition:none !important;
  -moz-transition:none !important;
  -o-transition:none !important;
  transition:none !important;
}

Note that this is not the same as the submenu dropdown animation. You can turn that off in the UberMenu Control Panel if you wish.

WordPress MultiSite/WPMU?

You can activate UberMenu on individual sites within your MultiSite installation.

Each individual site within the MultiSite network is considered a single installation relative to the CodeCanyon (single-use) Regular License. If you want to use UberMenu on a WordPress MultiSite installation, you must purchase a license for each site on which it is activated.

That being said, UberMenu is not tested network-activated with WPMS (since the license does not cover this), and the timthumb image-resize functionality of UberMenu may not work properly in WPMS installations (so you may not be able to make use of the timthumb automatic resizing of thumbnails, and need to upload your images already pre-sized).

UberMenu will not work globally (network-wide) on WPMS – i.e. you can’t automatically have the same menu on every site. Each site will have its own independent instance of UberMenu running.

Possible Exception / Grey Area

If you are running a site with multiple subsites that is truly a single site, where you are using an identical menu on each subsite, I see this as a grey area; technically the Regular License does not cover multi-site use, but in this case I understand the argument that it is still single-use. In situations like this (a true single site with identical menus on each subsite), I leave it to your best judgment to determine whether your usage constitues single-use and is covered by the Regular License. Do what you think is right. If you have any concerns, the best thing to do is contact Envato Support for official clarification.

How can I prevent UberMenu from adding CSS to my site head?

When UberMenu generates dynamic CSS based on your settings, it will place it in the of your site. Examples include padding for your images (based on the image size you set in the Control Panel), CSS Tweaks, as well as Sticky menu settings (if you are using the Sticky Extension), and Style Generator styles (if you choose not to print them to a file).

These styles are necessary for your UberMenu to function properly, so you should not remove them completely. However, you can copy them into an external stylesheet instead if you prefer. To disable the style output in the header, add this code to your theme’s functions.php

add_action( 'wp_loaded' , 'ubermenu_remove_CSS_output' );
function ubermenu_remove_CSS_output(){
	global $uberMenu;
	remove_action( 'wp_head', array( $uberMenu  , 'insertCSS' ), 100 );
}

Not a menu item

If you receive the message “the given object id is not that of a menu item”, this seems to be an issue with the standard WordPress menu system (note that this is not related to UberMenu, this article is just here to help if you run into trouble with the WordPress core menu system). It seems that it is the result of some type of database corruption

There are two things you can do:

1. Try repairing your MySQL database.

A use has reported that working with the same issue here

2. Increase your PHP memory_limit, as suggested here

It is likely your server is hitting its configured memory limit and preventing the menu save from completing successfully, leaving you with a broken menu.

There is also the possibility that you have reached a Menu Item Limit, and that those solutions may help

Windows 8 Touch Screens & IE10/11

UberMenu 2.4

As of UberMenu 2.4, the first click on a Windows Touch screen will open the submenu, and the second will follow the link.

Both hover and click events are registered on devices with touch and pointer interfaces. This is a step toward complete Windows touch compatibility in UberMenu 3.

UberMenu 2.3 and earlier

If you are using a touch-enabled Windows 8 device that also includes a click device (mouse), you’ll notice that UberMenu’s submenus are triggered by a click or touch, rather than a hover event.

This is an issue with the way the Windows 8 implements touch events, because they have not made touch and hover events compatible. You can read a bit about these issues here:

http://forums.wpcentral.com/windows-phone-8/202545-ie-10-drop-down-menu-problem.html

http://answers.microsoft.com/en-us/ie/forum/ie10-windows_8/drop-down-list-closes-immediately-on-most-web/5b9fd233-7034-4308-8bd3-0209ebd0cda0

Unfortunately, Windows 8’s touch system isn’t compatible with the standard dropdown menu that appears on just about every site on the web. While it is my goal to make UberMenu compatible of course, but it’d be great to see a solution from Microsoft on this rather than having to code another exception for IE.

At the moment, what UberMenu does is to automatically force UberMenu into “Click” mode when an IE touch interface is detected – that way it can work on touch devices for touch events. The problem then is that the hover events no longer work with a mouse, and that top level links cannot be followed.

Note that everything works properly on Windows 8 / IE11 on normal devices; it is only devices with touch capability that are affected.

Part of the issue is that Internet Explorer has created its own touch events, like MSPointerDown, rather than following web standards events. Code that works properly on every other device/browser (and has since the inception of touch devices), isn’t handled properly with Microsoft’s proprietary implementation.

The goal is to move to a fully touch-enabled event system with UberMenu, but that is not something that can be accomplished immediately. For now, this is the best solution that affects the smallest percentage of users, as touch-enabled desktop machines remain a very small marketshare.

Of course, we can always hope Microsoft actually improves their touch interface so that it can work with the millions of existing menus out there that implement the hover events, just like iOS and Android have for years.

Note that it is possible Windows has created a solution in the meantime that I am unaware of (since I don’t have a Windows 8 touch device to test on). For those who would like to experiment, or change the functionality, you can remove this code from the UberMenu JS file and see if things are working any better presently with hover events:

//Windows 8 Temporary Measures
if( window.navigator.msMaxTouchPoints ){
    uberMenuSettings['trigger'] = 'click';
}

This code will be have a toggle setting in the next version of UberMenu.

Please note that a fully Windows Touch-compatible UberMenu is currently in development. Unfortunately, due to Microsoft’s non-standard touch events, this will require an entire rewrite of UberMenu’s javascript. It’s taking some time to make sure that this is done properly so that the touch experience is unified cross-browser, and my hopeful release target date is April 2014.

RTL

This is the article for UberMenu 2, if you are using UberMenu 3, please see the UberMenu 3 RTL Guide

UberMenu 2 does not currently have an option to enable RTL, but in general customers just need to add this CSS snippet:

#megaMenu ul.megaMenu li.menu-item,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega ul.sub-menu-1 > li.menu-item{
  float:right;
  text-align:right;
}

For details on implementing a complete RTL stylesheet, please see the Codex: Right-to-Left Language support

Why aren’t extensions included in the core plugin?

Not everybody needs all the functionality that the UberMenu Extensions offer – like a sticky menu, conditional menu items, or icons. In an effort to keep the core product as inexpensive as possible and keep the plugin code as lightweight as possible, non-essential components have been broken out into modular extensions which can be added to the UberMenu plugin individually to augment functionality.

In other words, we could charge $40 for UberMenu with all the extensions and the menu management enhancer included – which many customers won’t need – or we can charge $16 for the core plugin and allow customers to pick and choose which functionality they’d like. In the end, this helps our customers save some cash.

Thanks for your business!

When I use the columns shortcode, I get a PHP Warning.

The columns shortcode uses regular expressions to intelligently determine your columns without the need to identify each column’s index. This requires the use of the PHP pcre package, version 7.8 or later. The following error:

indicates that you are running an older version of pcre. To solve this error, upgrade your server’s pcre package. You can contact your hosting provider for specific details.

UberMenu is unstyled on the login/registration page.

Normally with WordPress, the login page isn’t styled, so UberMenu’s CSS and JS aren’t loaded there in order to avoid conflicts that arise when only the login styles are loaded.

To load on the registration and login pages, just enable Load UberMenu on Login and Registration Pages in Appearnce > UberMenu > Theme Integration.

Submenu is hidden behind a Flash object

iOS Video overlapping unresponsive menu issues

If your videos are dynamically created and inserted (with javascript, for instance), and they overlap an UberMenu submenu (or any content on your page) iOS won’t handle that nicely – the overlapped content will become unresponsive after you activate/play the video.

Unfortunately, there is nothing to be done from an UberMenu standpoint – this is an issue with the way iOS handles dynamically inserted Flash objects and overlapping HTML elements. Here are some potential solutions for the issue – your mileage may vary:

Potential Solution #1

Getting embedded Youtube videos to stay under your drop down menu – even with an iPad – if you are using embed code, this may work – just like the wmode fix presented above.

Potential Solution #2

This Stack Overflow answer explains the dynamic insertion issue (see the answer with 18+ votes) :

This solution has worked for some people, depending on the situation

You can fix z-index on dynamically created videos by giving the video element -webkit-transform-style: preserve-3d

Potential Solution #3

If your videos are dynamically inserted, insert them statically instead. The issue seems to only occur with dynamically inserted videos, based on reports.

Potential Solution #4

If all else fails, you could write some javascript that will hide the video when UberMenu is in the hover state. Something like:

<script>
jQuery( document ).ready( function( $ ){
  $( '#megaMenu > ul > li' ).live( 'ubermenuopen', function(){
      $( '.video-replacement-link' ).remove();
      $( 'video, iframe' ).hide().after( '<a class="video-replacement-link" href="#">show video</a>' );
    });
    $( '.video-replacement-link' ).live( 'click', function(){
          $( 'video, iframe' ).show();
          $( '.video-replacement-link' ).remove();
    });
});
</script>

But even this may introduce its own issues in iOS. Until iOS Safari becomes a more robust browser, this may simply be a limitation of having videos on your site

If none of the above solutions work for you, unfortunately this issue seems unresolvable for the time being. This issue is due to the way mobile Safari handles video elements and focus layering. Until Apple resolves the issue with mobile Safari, there is no solution to my knowledge.

Featured thumbnail – there is no “Use as Featured Image” option

In WordPress 3.3, the way Featured Images were handled changed, making the “Use as featured image” option in the Media Manager “disappear”. UberMenu 1.1.4 was released to make UberMenu compatible with the new WordPress release (please see the UberMenu change log at the bottom of the product page for more information).

If you are still using UberMenu 1.1.3 or earlier, and have upgraded to WordPress 3.3, you have two options: upgrade to UberMenu 2.0 (see the important upgrade instructions), which you can download through your CodeCanyon Downloads page.

Icons Extension

Welcome to UberMenu Icons Extension! Thank you for purchasing this plugin, I appreciate it!

This guide should answer all your questions about how to use this plugin. You can browse the document using the navigation sidebar on the left, or search the entire document by using the search bar above.

Sticky Extension

Welcome to UberMenu Sticky Extension! Thank you for purchasing this plugin, I appreciate it!

This guide should answer all your questions about how to use this plugin. You can browse the document using the navigation sidebar on the left, or search the entire document by using the search bar above.

Flat Skin Pack Extension

Conditionals Extension

Menu Management Enhancer Knowledgebase

Here are some tips on using the Menu Management Enhancer. Please take a minute to read through this manual before contacting me directly.

If you find your question is not answered after reading the support guide, please post a question in the Support Forum. Please use the account you used to purchase the plugin and describe the means you’ve attempted to solve the problem when you contact me. Thanks!

Overview

Menu Management Enhancer for WordPress adds enhanced features to the backend of the WordPress Menu System (that’s the page in Appearance > Menus where you build your menu).

• Manage large numbers of menu items with ease
• Expand and collapse the menu tree to save space
• Quickly jump to any top level menu item
• Enhanced drag & drop jump-to-item feature