Roots creates residual styling and removes critical classes from the menu. We can fix these issues in a child theme.

1. Stop Roots from removing Core WordPress menu item classes

Roots does a lot of non-standard things to alter the normal WordPress installation, and this can be problematic for plugins. One main issue this theme presents is that it strips core WordPress Menu Item classes that are necessary for UberMenu to style the menu properly. Here is the code from Roots’ lib/nav.php line 55.

/**
 * Remove the id="" on nav menu items
 * Return 'menu-slug' for nav menu classes
 */
function roots_nav_menu_css_class($classes, $item) {
  $slug = sanitize_title($item->title);
  $classes = preg_replace('/(current(-menu-|[-_]page[-_])(item|parent|ancestor))/', 'active', $classes);
  $classes = preg_replace('/^((menu|page)[-_\w+]+)+/', '', $classes);

  $classes[] = 'menu-' . $slug;

  $classes = array_unique($classes);

  return array_filter($classes, 'is_element_empty');
}
add_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10, 2);
add_filter('nav_menu_item_id', '__return_null');

As a result, all of the critical, core menu item classes like menu-item are removed, and UberMenu’s styles cannot apply to your menu. Themes shouldn’t remove core functionality from WordPress, as WordPress is a modular system that needs to share core functionality across themes and plugins.

We can add this code to a child theme to stop the removal of these important classes:

function stop_removing_core_classes(){
  remove_filter('nav_menu_css_class', 'roots_nav_menu_css_class', 10 );
  remove_filter('nav_menu_item_id', '__return_null');
}
add_action( 'init' , 'stop_removing_core_classes' );

2. Remove residual styling

The templates/header-top-navbar.php should be overridden in a child theme. Here is the target code:

<nav class="nav-main nav-collapse collapse" role="navigation">
   <?php
     if (has_nav_menu('primary_navigation')) :
       wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav'));
     endif;
   ?>
</nav>

Instead of wrapping wp_nav_menu() in a hard-coded nav element, Roots should be making use of the wp_nav_menu arguments that can set the container to a nav and pass the appropriate classes. Instead, we’ll need to edit this – you can either just remove all the classes from the nav element

<nav role="navigation">
   <?php
     if (has_nav_menu('primary_navigation')) :
       wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav'));
     endif;
   ?>
</nav>

Or simply remove the nav wrapper altogether, and UberMenu will take care of the rest.

   <?php
     if (has_nav_menu('primary_navigation')) :
       wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav'));
     endif;
   ?>

3. Stop Roots from stripping the menu wrapper

Roots filters the menu wrapper which strips the

/**
 * Clean up wp_nav_menu_args
 *
 * Remove the container
 * Use Roots_Nav_Walker() by default
 */
function roots_nav_menu_args($args = '') {
  $roots_nav_menu_args['container'] = false;

  if (!$args['items_wrap']) {
    $roots_nav_menu_args['items_wrap'] = '<ul class="%2$s">%3$s</ul>';
  }

  if (current_theme_supports('bootstrap-top-navbar') && !$args['depth']) {
    $roots_nav_menu_args['depth'] = 2;
  }

  if (!$args['walker']) {
    $roots_nav_menu_args['walker'] = new Roots_Nav_Walker();
  }

  return array_merge($args, $roots_nav_menu_args);
}
add_filter('wp_nav_menu_args', 'roots_nav_menu_args');

remove_filter('wp_nav_menu_args', 'roots_nav_menu_args');