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: Replace it with this code: 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: To add UberMenu, add this code: 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.

Some themes require some customizations in order to integrate UberMenu properly. I’ve reviewed and written up integration instructions for the following themes: Theme Integration Instructions

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: Create a child theme for the YIT theme with style.css, functions.php, and yit_header.php template 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” 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: Activate the child theme and set a menu in the theme location in Appearance > Menus Bazar-specific Instructions 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. 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. Find this code in yit_header.php: id=”nav” and change it to id=”nav-uber” 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: If your submenu is obstructed by the slider, you can add this CSS to layer the menu on top: Room09 For the Room09 theme, I’ve created a child theme that does all of this for you. Just install […]

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

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 To resolve this, we’ll add the following code to our child theme’s functions.php I’ve created a sample child theme that includes this code, so you can just install it if you like Download Foundation Child Theme

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 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 and remove some of the residual styling with

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 with 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. If we want to make the menu a bit taller like the original menu, we can add We’ll also make sure the top menu overlaps properly (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. Unfortunately, this theme includes a version number in its theme directory name, so this name will change as you update the theme, making this more difficult than it needs to be. What you’ll need to do is check the style.css file in the child theme and adjust two values to make sure they match the directory of your theme: 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 […]

To integrate UberMenu with Toolset Bootstrap, we’ll need to replace the default menu with UberMenu in order to strip out the residual styling, and stop the theme from removing the menu wrapper. I’ve provided a child theme at the end which accomplishes all of this. First, replace the menu in header.php with UberMenu Direct: We wrap it in a span12 to keep everything aligned Now, the Toolset Bootstrap will strip out UberMenu’s wrapper in its `functions.php`, which breaks everything: To resolve this, we add this to the child theme’s functions.php Finally, we recreate the spacing from the original theme. Here is the child theme that, once installed and activated, takes care of all of the above: Download Toolset Bootstrap Child Theme

These instructions are for older versions of Enfold. For the current version, see Enfold Integration Instructions Enfold has two menus: Main and Secondary. There are separate instructions for each: Main Secondary Main Menu 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, we’ll take each style in turn. Pick the one you want to use and apply the prescribed CSS changes for optimal UberMenu + Enfold integration. 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. 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. Desktop Menus Enfold offers several desktop menu styles under Enfold > Header > Header Type. Depending on which Header Type you choose, you’ll want to do something a bit different with UberMenu. Integration Type 1: Header with Social Icons and bottom Navigation The last option is the easiest to sort out, and perhaps the most common layout for using a mega menu, so we’ll cover that first. When you activate UberMenu, it’ll look like this: You’ll see that the menu is compressed vertically because Enfold sets an explicit height on this menu. To resolve this, simply add: and the issue is resolved. Integration Type 2: Non-fixed Headers ( “Small non-fixed […]