Kleo (SeventhQueen)

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

UberMenu Settings

Menu Bar Alignment

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

Skin

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

Menu height / Vertical alignment

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;
}

Hide the Kleo mobile toggle

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;
}

Full Width Submenus

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;
}

Kleo Settings

Disable Compact overflowing menu items

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

Disable Search

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

On this page