Twenty Sixteen

Residual Styling

The Twenty Sixteen theme will cause minor residual styling – its styles will interfere with the functionality of the menu.

Responsive Toggle on Desktop

The Twenty Sixteen CSS styles force all anchors within the menu to display:block;

.main-navigation a {
	color: #1a1a1a;
	display: block;
	line-height: 1.3125;
	outline-offset: -1px;
	padding: 0.84375em 0;
}

The most obvious result of this will be that the responsive toggle will be forced to display on desktop (when it should not be).

The simplest way to avoid this most obvious issue is to set the Responsive Toggle Tag setting to div in the Control Panel > Main UberMenu Configuration > Responsive & Mobile > Responsive Toggle Tag

Submenu Width

You’ll likely also want to set the Submenu Bounds setting in the Control Panel to Unbounded so that your submenu can expand to the full width of your content area while the menu bar is aligned right.

Manual Integration

For many users, this will allow you to use UberMenu with Twenty Sixteen. However, there are still some styles from the theme that will apply due to residual styling, for example, the position of flyout submenus due to this style:

	.main-navigation li:hover > ul,
	.main-navigation li.focus > ul {
		left: auto;
		right: 0;
	}

So if you encounter any interference like this from the theme, the best thing to do is use Manual Integration to replace the theme’s entire entire #site-navigation/.main-navigation nav block with UberMenu to prevent the theme from interfering.

Copy the header.php to a child theme, and replace this code:

<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
<?php
wp_nav_menu( array(
	'theme_location' => 'primary',
	'menu_class'     => 'primary-menu',
 ) );
?>
</nav><!-- .main-navigation -->

with this:

<?php if( function_exists( 'ubermenu' ) ): ?>
  <?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
<?php else: ?>
  <nav id="site-navigation" class="main-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary Menu', 'twentysixteen' ); ?>">
    <?php
	wp_nav_menu( array(
		'theme_location' => 'primary',
		'menu_class'     => 'primary-menu',
	 ) );
    ?>
  </nav><!-- .main-navigation -->
<?php endif; ?>

to complete the manual integration