UberMenu Integration

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

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)

COPY CODE

.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:

COPY CODE


.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:

COPY CODE


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

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