Theme Integration

Knowledgebase Docs » UberMenu 2 » Theme Integration

Genesis 7

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 If submenus don’t open or the styling doesn’t look right There are two issues when integrating with Genesis: The submenus may be hidden. This is due to an overflow:hidden; on the #nav div 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 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 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:

View

Headway 3.0+ 1

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. Activate UberMenu Easy Integration via Appearance > UberMenu > Theme Integration > Easy Integration Activate Strict Mode via Appearance > UberMenu > Theme Integration > Strict Mode 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 Set your desired menu in the “UberMenu” menu theme location in the Theme Locations meta box and click Save 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: (Right click block > Open Block Options > Click Content > Paste in Editor) 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: Where block-11 is the ID of the custom block. You can place the style in Headway’s Live CSS Editor (or […]

View

ThemeBlvd Framework ( Jump Start , Akita , Commodore , etc) 0

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) 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) 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: Old Instructions (just for reference) (Place this in your child theme’s functions.php): 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:

View

Mingle / Salutation 0

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: Replace the content within the if statement with just so that your end result is 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. 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 2. To remove the theme’s styling from the menu, you’ll need to change the class name of the left/primary […]

View

Karma 0

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. 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: 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

View

Redux by Orman Clark 0

Redux is great, it just requires some residual styling removal Open the theme’s header.php. Locate this line: In the line below, change the ID of the #primary-nav div to uber-nav, so you have this: This removes the residual styling. 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:

View

iThemes Builder 4

Activate Strict Mode in Appearance > UberMenu > Theme Integration Activate UberMenu Easy Integration in Appearance > UberMenu > Theme Integration Assign the appropriate menu to the UberMenu [Easy Integration] theme location Appearance > Menus > Manage Locations Add a new HTML module in Builder, placing it where you want your menu to appear. Enter the Easy Integration shortcode in your module: Save the HTML module 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: 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: 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;

View

Xtreme One 1

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 Add this to the blank child theme’s functions.php: Activate UberMenu Easy Integration via Appearance > UberMenu > Theme Integration > Easy Integration Activate Strict Mode via Appearance > UberMenu > Theme Integration > Strict Mode 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 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:

View

Gantry Framework 3

Note that I do not recommend use with Gantry unless you feel comfortable making these changes. 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: 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: 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.

View

Suffusion 0

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: Main Navigation (Below Header) Then follow the guide for activating Easy Integration, and you should be all set!

View