# UberMenu Integration

Source: https://seventhqueen.com/docs/kleo/ubermenu-integration/

**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”

![](https://cdn.seventhqueen.com/docs/media/other/i/5EMm3H6.png)

**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](http://sevenspark.com/docs/ubermenu-3/customize/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](http://sevenspark.com/docs/ubermenu-3/customize/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”

![](https://cdn.seventhqueen.com/docs/media/other/i/JdaWI1k.png)

To restrict the submenu width to your inner content width, add this CSS as well in your [CSS Tweaks](http://sevenspark.com/docs/ubermenu-3/customize/css-tweaks):

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

#### Kleo Settings

**Disable Search**

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

![](https://cdn.seventhqueen.com/docs/media/other/i/vkDd3xO.png)

This search bar will screw up the menu on mobile, so you should disable it. Instead, you can use the UberMenu [Search Bar](http://sevenspark.com/docs/ubermenu-3/content/shortcodes/search)