Orion Press (ridwanreedwan)

OrionPress creates residual styling (see also: residual styling troubleshooting guide) when integrated with UberMenu, because it wraps the wp_nav_menu call in the nav-wrap class.

If the theme were to use the built-in wp_nav_menu container functionality, it would integrate with UberMenu almost perfectly.

Here’s the default code in the header.php:

									<div class="nav-wrap">
										<?php 
										if ( has_nav_menu( 'main_menu' ) ) :
											wp_nav_menu( array( 'container' =>false, 'theme_location' => 'main_menu', 'menu_id' => 'main_menu' )); 
										else:
											echo '<span class="noMainmenu">' . __( 'Define your site main menu', 'orion' ) . '</span>';
										endif;
										?>
									</div>	

by removing the wrapper and changing the above code to simply

<?php 
	if ( has_nav_menu( 'main_menu' ) ) :
		wp_nav_menu( array( 'container' =>'div', 'container_class' => 'nav-wrap' , 'theme_location' => 'main_menu', 'menu_id' => 'main_menu' )); 
	else:
		echo '<div class="nav-wrap"><span class="noMainmenu">' . __( 'Define your site main menu', 'orion' ) . '</span></div>';
	endif;
?>

the output is identical when UberMenu is not present, but when UberMenu is activated it can replace the menu entirely without incurring any residual styling.

The only conflict I’ve seen is that when the menu collapses at mobile sizes, the search button overlaps UberMenu’s menu expand toggle button. To resolve this conflict and move the menu toggle to the left, add this CSS:

.headersearch-button{
  z-index:100;
}
#megaMenu #megaMenuToggle .megaMenuToggle-icon{
  float:left;
  margin-right:10px;
}

If you’d like the theme’s navigation container to better fit the menu, add this:

.nav-container{
	height:auto !important;
}

And if you’d like to remove the grey border added by the theme, add this:

.nav-container{
	border:none;
}

How to implement

This change should be made by copying the header.php into a child theme and making the PHP edit there. Since this is a new theme, I don’t want to provide a child theme as things may still be changing in the header template file and I wouldn’t want to provided an outdated child theme.

The CSS can either be added to a child theme’s style.css or in the UberMenu Custom Tweaks box. See Adding Custom CSS if you are unsure.