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.