- 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:
[uberMenu_easyIntegrate]
- 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:
#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;