UberMenu 3

Kleo (SeventhQueen)

Kleo works pretty much out of the box with UberMenu. There are just a few settings tweaks that need to be made:

If you want the menu to be aligned to the right of your logo, set the menu bar alignment to “Right”

To mimic the original theme menu most closely, choose the Vanilla skin

To align the menu vertically to the logo, add this CSS to your Desktop CSS Tweaks

(Note that you could do this in the Customizer with the Vertical Padding setting, but that would affect the mobile menu as well)

.ubermenu .ubermenu-item-level-0 > .ubermenu-target{
  padding-top:64px;
  padding-bottom:64px;
}

Since we don’t need the Kleo mobile toggle any longer, we can hide it by adding this CSS in your CSS Tweaks:

.kleo-mobile-switch{
  display:none !important;
}

If you want to expand your submenus beyond the width of your menu items, switch the Bound Submenu To setting to “Unbounded”

To restrict the submenu width to your inner content width, add this CSS as well in your CSS Tweaks:

.kleo-main-header .container{
    position:relative;
}

Make sure the theme’s Compact overflowing menu items setting is disabled (in the Off position), otherwise this can crop UberMenu’s submenu.

Kleo UberMenu Compact overflowing menu items setting

In the Kleo Settings > Header Options, disable the AJAX Search in Menu setting

This search bar will screw up the menu on mobile, so you should disable it. Instead, you can use the UberMenu Search Bar