Modernize (GoodLayers)

Modernize uses its own responsive system and adds a bit of residual styling to the menu, so we’ll want to replace the entire GoodLayers navigation with UberMenu instead. Here’s what to do (requires UberMenu 2.3+):

1. Make edits in a Child Theme

It is recommended that you make all edits in a Child Theme in order to preserve your changes when the next theme update comes along.

Once you have your child theme created, just copy the header.php from the modernize theme into the child theme.

2. Replace Modernize menu with UberMenu

The simplest way to resolve the conflicts between Modernize and UberMenu is to simply replace the entire Modernize menu with UberMenu. In the header.php file, you will find this navigation section:

		<!-- Navigation and Search Form -->
		<div class="main-navigation-wrapper">
			<?php 
				if( $gdl_is_responsive ){
					echo '<div class="responsive-container-wrapper container-wrapper">';
					dropdown_menu( array('dropdown_title' => '-- Main Menu --', 'indent_string' => '- ', 'indent_after' => '','container' => 'div', 'container_class' => 'responsive-menu-wrapper', 'theme_location'=>'main_menu') );	
					echo '</div>';
				}
			?>
			<div class="navigation-wrapper">
				<div class="navigation-container-wrapper container-wrapper">
					<!-- Get Navigation -->
					<?php wp_nav_menu( array('container' => 'div', 'container_class' => 'menu-wrapper', 'container_id' => 'main-superfish-wrapper', 'menu_class'=> 'sf-menu',  'theme_location' => 'main_menu' ) ); ?>
					
					<!-- Get Search form -->
					<?php if(get_option(THEME_SHORT_NAME.'_enable_top_search','enable') == 'enable'){?>
					<div class="search-wrapper"><?php get_search_form(); ?></div> 
					<?php } ?>
					
					<div class="clear"></div>
				</div> <!-- navigation-container-wrapper -->
			</div> <!-- navigation-wrapper -->
		</div>

We’ll leave the outermost wrapper intact, but replace everything inside it with UberMenu. Here’s the resulting section of header.php:

<!-- Navigation and Search Form -->
<div class="main-navigation-wrapper">
	<?php uberMenu_direct( 'main_menu' ); ?>
</div>

We use the ‘main_menu’ theme location provided by Modernize, so you just need to activate UberMenu on your Main Menu theme location.

Mobile Devices

If your menu won’t expand on mobile devices, it is likely obstructed by another element and you may need to add

.main.container{
  clear:both;
}