Schema (MyThemeShop)

Schema will cause residual styling and filter the menu output, so we need to use Manual Integration to overcome this.

Manual Integration

Remember to make all changes in a child theme in order to preserve them when you update in the future

Copy your header.php to a child theme. Then open the file and conditionally replace the theme’s menu:

	<div class="secondary-navigation">
		<nav id="navigation" class="clearfix" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
			<?php if ( has_nav_menu( 'secondary-menu' ) ) { ?>
				<?php wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker ) ); ?>
			<?php } else { ?>
				<ul class="menu clearfix">
					<li class="menu-item pull"><a href="#" id="pull" class="toggle-mobile-menu"><?php _e('Menu','mythemeshop'); ?></a></li>
					<?php wp_list_categories('title_li='); ?>
				</ul>
			<?php } ?>
		</nav>
	</div>

with UberMenu:

<?php if( function_exists( 'ubermenu' ) ): ?>
	<?php ubermenu( 'main' , array( 'theme_location' => 'secondary-menu' ) ) ; ?>
<?php else: ?>
	<div class="secondary-navigation">
		<nav id="navigation" class="clearfix" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
			<?php if ( has_nav_menu( 'secondary-menu' ) ) { ?>
				<?php wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker ) ); ?>
			<?php } else { ?>
				<ul class="menu clearfix">
					<li class="menu-item pull"><a href="#" id="pull" class="toggle-mobile-menu"><?php _e('Menu','mythemeshop'); ?></a></li>
					<?php wp_list_categories('title_li='); ?>
				</ul>
			<?php } ?>
		</nav>
	</div>              
<?php endif; ?>

Prevent Filter Overrides

Schema will filter the menu and take over, not allowing UberMenu to control it. To overcome this, enable the Force Filter UberMenu Settings setting in the Control Panel > General Settings > Miscellaneous.

(This is critical)

Customizer Styles

Next, use the Customizer if you’d like to recreate some of the theme menu styles. You can do whatever you like here, but for a good start you might try using the Vanilla skin and then change the top level item colors to white, with black text on white backgrounds when hovered or current.

Menu Bar Alignment

In the Control Panel, change the menu bar alignment to “Right” if you’d like the menu to appear beside the logo.

Unbounded Submenus

In the UberMenu Control Panel, change the Bound Submenu To setting to allow it to expand to the full width of the content area (rather than be restricted to the width of the top level menu items)

Desktop Tweaks

Add this CSS in the CSS Tweaks – Desktop to increase the top level menu item height on desktop only.

.ubermenu .ubermenu-item-level-0 > .ubermenu-target{
    padding-top:43px;
    padding-bottom:42px;
}

Mobile Tweaks

Add this CSS in the CSS Tweaks – Mobile to fix a clearance issue in the theme header so that the toggle bar sits below the logo.

.ubermenu-responsive-toggle{
    clear:both;
    display:block;
    float: left;
    width:100%;
}

UberMenu 3