Builder (iThemes)

Knowledgebase Docs » UberMenu 3
USEFUL? 0
UberMenu 3

Builder’s menu causes residual styling, so rather than using a navigation menu module, you’ll use UberMenu’s shortcode to integrate UberMenu manually

1. Activate Easy Integration

Activate the Easy Integration Theme Location in the UberMenu Control Panel > General Settings > Advanced > Register Easy Integration UberMenu Theme Location

2. Add an HTML module in your Builder layout

In your Builder layout add an HTML module. This will replace the original menu module.

3. Add the UberMenu Manual Integration Shortcode to the HTML module

In the UberMenu Control Panel > Main UberMenu Configuration > Integration > Manual Integration, select the UberMenu [Easy Integration] theme location and copy the generated shortcode

Copy the shortcode and paste it into your Builder HTML Module. Save your Builder layout

4. Assign your menu

In Appearance > Menus > Manage Locations, assign the menu you want to display to the UberMenu [Easy Integration] theme location.

5. Prevent the theme from cutting off the submenus

Builder may add overflow:hidden on its module code, cutting off the submenus. To reveal them, you’ll need to write some custom CSS to set overflow back to visible. 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.