Karma (TrueThemes)

Karma attempts to support UberMenu, but the CSS that it adds ends up breaking many of the UberMenu features. It looks like if you want to use the menu exactly the way Karma has defined, you can leave it; but if you want to be able to use all of UberMenu’s features as intended, we’ll need to use manual integration and remove some theme CSS that is targeting UberMenu to prevent it from interfering. For example, Karma is known to break both Tabs and Flyout submenus functionality with its CSS, so it must be removed to use those features.

Manual Integration

The first thing we’ll need to do is manually integrate the menu. Copy the header.php into a child theme to preserve the changes. Then find the menu around line 244

	<nav role="navigation">
	<?php if('true' == $ubermenu):
		wp_nav_menu(array(
			'theme_location' => 'Primary Navigation' ,
			'depth'          => 0 ,
			'container'      => false ,
			'walker'         => new description_walker() ));
	else: ?>
	<ul id="menu-main-nav" class="sf-menu">
	<?php wp_nav_menu(array(
			'theme_location' => 'Primary Navigation' ,
			'depth'          => 0 ,
			'container'      => false ,
			'walker'         => new description_walker() )); ?>
	</ul>
	<?php endif; //end uberMenu check  ?>
	</nav>

Then conditionally replace it with UberMenu:

<?php if( function_exists( 'ubermenu' ) ): ?>
	<?php ubermenu( 'main' , array( 'theme_location' => 'Primary Navigation' ) ); ?>
<?php else: ?>
	<nav role="navigation">
	<?php if('true' == $ubermenu):
		wp_nav_menu(array(
			'theme_location' => 'Primary Navigation' ,
			'depth'          => 0 ,
			'container'      => false ,
			'walker'         => new description_walker() ));
	else: ?>
	<ul id="menu-main-nav" class="sf-menu">
	<?php wp_nav_menu(array(
			'theme_location' => 'Primary Navigation' ,
			'depth'          => 0 ,
			'container'      => false ,
			'walker'         => new description_walker() )); ?>
	</ul>
	<?php endif; //end uberMenu check  ?>
	</nav>
<?php endif; ?>

Important Note

After you do this, the menu will be completely unstyled because the theme filters the menu output. To counteract this, go to the UberMenu Control Panel > General Settings > Miscellaneous and enable Force Filter UberMenu Settings

Force Filter UberMenu Settings

Removing theme CSS

In the theme’s style.css, it adds many styles which interfere with the display and functionality of UberMenu. Here are some examples:

#menu-main-nav,
.ubermenu ul.ubermenu-nav,
.header-area .ubermenu {
	float: right;
}
#header .header-holder.tt-logo-center #menu-main-nav,
#header .header-holder.tt-logo-center .ubermenu ul.ubermenu-nav {
	margin: 0;	
}
#header .header-holder.tt-logo-center #menu-main-nav,
#header .header-holder.tt-logo-center .ubermenu {
	float: none;
	text-align: center;
}
#header .header-holder.tt-logo-center #menu-main-nav:after,
#header .header-holder.tt-logo-center .ubermenu ul.ubermenu-nav:after {
    clear: both;
    content: "";
    display: block;
}
#header .header-holder.tt-logo-center #menu-main-nav li,
#header .header-holder.tt-logo-center .ubermenu ul.ubermenu-nav li {
	display: inline-block;
	float: none;
}
#header .header-holder.tt-logo-center .ubermenu ul.ubermenu-nav li ul.sub-menu li {
	float: left;
}

We need to remove the UberMenu-related styles, as they break the menu and prevent it from being able to function properly. Unfortunately, these styles are all mixed in with the theme styles, so we can’t just delete everything without breaking the theme menu as well.

What I recommend is using a Find and Replace in the style.css. We’ll find ubermenu and replace with NO_ubermenu. This will make sure none of the UberMenu styles apply while keeping the theme menu styles intact. Example:

#header .header-holder.tt-logo-center #menu-main-nav,
#header .header-holder.tt-logo-center .NO_ubermenu ul.NO_ubermenu-nav {
	margin: 0;	
}

You can also easily undo this by running the inverted find and replace.

Now that we’ve removed the code from the theme interfering with the menu, you should be able to use UberMenu’s features without issue. Note that you may need to change positional settings like changing the Menu Bar Alignment to “Right” if you want your menu to appear beside your logo.

Hide mobile toggle

Hide the theme’s mobile toggle by adding this CSS:

#tt-mobile-menu-button{
	display:none !important;
}

Alternatively, remove the toggle from the theme’s template.

Mobile overflow

If your submenus are cut off on mobile, add this CSS to override the CSS from the theme that cuts off the submenus:

#wrapper #header{
	overflow:visible !important;
}

UberMenu 3