Javo Directory (javothemes)

In the configuration that we’ve tested, Javo Directory doesn’t require manual integration (though it is possible that some configurations may). However, you’ll want to configure the UberMenu settings to work well with Javo Directory:

1. Menu Bar Alignment

By default, UberMenu will be full width on your site. With Javo, you’ll likely want to set its alignment to Left in the UberMenu Control Panel.

2. Responsiveness & Mobile

Out of the box, UberMenu will be wrapped in Javo’s responsive menu system. Normally, I’d recommend moving UberMenu outside of this using Manual Integration. However, there is a secondary menu (not controlled by UberMenu) also in this menu area which we don’t want to lose.

A simpler solution, since there doesn’t seem to be any further residual styling, is to just disable UberMenu’s responsive toggle and use Javo’s instead:

i. Disable the “Collapse by default” setting in the Control Panel > Main UberMenu Configuration > Responsive & Mobile

ii. Disable the “Responsive Toggle” setting in the Control Panel > Main UberMenu Configuration > Responsive & Mobile

Now Javo’s responsive toggle will reveal both UberMenu and the secondary menu.

You will probably want to add this CSS as well in your Mobile CSS Tweaks to keep the menu items at a good height, and allow the menu to expand enough (Javo limits this with CSS)

.ubermenu-responsive .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{
  padding-top:15px;
  padding-bottom:15px;
}
#javo-navibar{
  max-height:none;
}

3. Menu Bar Height

You’ll probably want the menu to be a bit taller to align properly with your header. Change the Top Level Vertical Padding setting in the customizer. 25px worked well for the site I was testing.

4. Submenu Bounds

You’ll probably want to allow the submenu to expand further than the menu bar. Set the Bound Submenu To setting to Unbound

If you want to keep the menu within the extents of the theme’s centered content area, add this CSS in your CSS Tweaks

.navbar .container{
	position:relative;
}

5. Skin

You can choose whatever skin you want, but the Vanilla skin works well if you have a white header background.