X Theme (Themeco)

UberMenu integrates nicely with X for the desktop menu, but to prevent the theme from interfering when it comes to the mobile menu, we’ll need to use manual integration.

Integrating UberMenu Manually

X Theme uses a nice system of templates, which makes integrating UberMenu in a child theme very easy.

Download, install, and activate the X Child Theme from ThemeCo, found here: Download Child Theme

X provides starter child themes for each of these stacks, which can be downloaded through their members area. Download and install the child theme of your choice, then activate it.

2. Assign your menu

When you switch themes (activating a child theme is technically switching to that theme), your menu theme locations will become unset. Go to Appearance > Menus > Manage Locations and reassign your menus to the appropriate theme locations

3. Override the _nav-primary.php template

X Theme Version 4
X Theme Version 3

In the child theme, we’ll need to create a new template that uses UberMenu in place of the theme menu. The child theme already includes the proper directory. The target directory is x-child/framework/views/global

Copy the parent theme’s x/framework/views/global/_nav-primary.php file into the child theme’s x-child/framework/views/global directory.

We need to make this template output UberMenu via Manual Integration instead of the X theme menu code.

At this point, you can just replace the entire file contents with the UberMenu manual integration code, but to make things more robust, we’ll add it conditionally using

<?php if( function_exists( 'ubermenu' ) ): ?>
  <?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
  //X Code
<?php endif; ?>

Here’s what the entire file will look like.

Copy the parent theme’s x/framework/views/global/_nav-primary.php file into the child theme’s x-child-{stack}/framework/views/global directory.

We need to make this template output UberMenu via Manual Integration instead of the X theme menu code.

At this point, you can just replace the entire file contents with the UberMenu manual integration code, but to make things more robust, we’ll add it conditionally using

<?php if( function_exists( 'ubermenu' ) ): ?>
  <?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
  //X Code
<?php endif; ?>

Here’s what the entire file will look like. You can just download this file and drop it in your child theme’s global directory:

_nav-primary.php

4. Configure UberMenu

At this point, UberMenu is properly integrated into the theme.

However, we can configure the menu to make it visually more in line with the theme.

Configuring UberMenu

Here are some basic configuration suggestions for the default X styling. Naturally, these will vary depending on your theme options, etc.

1. Change the Skin

Of course, X theme can have many different styles, but with the default styling, the Vanilla skin works well.

2. Adjust the menu bar height

If your menu is right-aligned and you want to vertically center it, you can adjust the Top Level Item Vertical Padding via the Customizer

37px works well with the default styling, but this will vary based on your logo size, etc.

3. Expand the submenu bounds

If your menu is right-aligned, you likely want the submenus to be able to expand beyond the width of the menu bar. To do so, set the Submenu Bounds to “Unbounded” in the Control Panel.

4. Mobile Refinement

To make sure the responsive toggle doesn’t overlap the logo area, and reduce the item heights add this CSS in the Mobile CSS Tweaks (so that they only apply to the mobile menu)

.masthead .x-brand{
  margin-bottom:20px;
}
.ubermenu-responsive-toggle{
  clear:both;
}
.ubermenu .ubermenu-item.ubermenu-item-level-0 > .ubermenu-target{
  padding-top:15px;
  padding-bottom:15px;
}

5. Sticky Refinement

If you’d like to adjust the height of the menu bar when the header becomes sticky, you can use the .x-navbar-fixed-top class to style the menu when the header is fixed.

For example, this reduces the padding to 10px when the header is sticky:

.x-navbar-fixed-top .ubermenu .ubermenu-item-level-0 > .ubermenu-target{
    padding-top:10px;
    padding-bottom:10px;
}

6. Cart and Search items

The cart and search items are just HTML injected by the theme, so they aren’t real menu items and therefore not controlled by UberMenu. If you want to align them right with the rest of the menu items, you can use this CSS:

.ubermenu .x-menu-item{
    float:right;
    padding:15px 10px;
}

7. Results integrating UberMenu and X theme

Desktop

Mobile

UberMenu 3