Listify (Astoundify)

To replace Listify’s secondary menu with UberMenu, you’ll want to use Manual Integration.

Note that as Listify has multiple menus, and the primary menu’s mobile menu is wrapped inside the secondary menu’s container and combined together on mobile, it makes integration more complex.

Manual Integration

First, copy your header.php into a child theme to preserve these changes if you update the theme in the future.

Primary Menu

The primary menu cannot be replaced easily by UberMenu, because the theme adds special items to it like the user name and avatar, etc. However, this menu is hidden by the theme on mobile, and its replacement is combined with the secondary menu, which makes things complicated.

Secondary Menu

We’ll replace the entire #site-navigation nav block with the UberMenu manual integration code in the header.php plus the theme’s responsive primary menu, as shown in the PHP below (see Before and After).

Disable the theme’s mega menu

First, make sure you do not have a menu assigned in the Customizer > Menus > Secondary Mega Menu, otherwise the theme will take over and filter the UberMenu output, breaking the menu.

Including the theme’s primary menu in the responsive menu

Note that we will include this code for the primary menu’s responsive menu:

			<div class="navigation-bar-wrapper">
				<?php
					wp_nav_menu( array(
						'theme_location' => 'primary',
						'container_class' => 'primary nav-menu',
						'menu_class' => 'primary nav-menu'
					) );
				?>
			</div>

Then we will add this custom javascript in the custom.js to toggle the theme’s primary responsive menu when UberMenu is toggled.

jQuery( '.ubermenu-responsive-toggle' ).on( 'click', function(e){ 
	jQuery( '.navigation-bar-wrapper' ).fadeToggle(); 
});

And add this CSS in the Mobile CSS Tweaks to move that menu down slightly and layer UberMenu and the theme menu properly:

.navigation-bar-wrapper{
  top:110%;
}
.ubermenu{
    position:relative;
    z-index:200;
}

Otherwise, the primary menu won’t be displayed at all on mobile.

Before

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<div class="container">
				<a href="#" class="navigation-bar-toggle">
					<i class="ion-navicon-round"></i>
					<?php echo listify_get_theme_menu_name( 'primary' ); ?>
				</a>

				<div class="navigation-bar-wrapper">
					<?php
						wp_nav_menu( array(
							'theme_location' => 'primary',
							'container_class' => 'primary nav-menu',
							'menu_class' => 'primary nav-menu'
						) );

						wp_nav_menu( array(
							'theme_location' => 'secondary',
							'container_class' => 'secondary nav-menu',
							'menu_class' => 'secondary nav-menu'
						) );
					?>
				</div>

				<?php if ( listify_theme_mod( 'nav-search' ) ) : ?>
					<a href="#search-navigation" data-toggle="#search-navigation" class="ion-search search-overlay-toggle"></a>

					<div id="search-navigation" class="search-overlay">
						<?php locate_template( array( 'searchform-header.php', 'searchform.php' ), true, false ); ?>
						<a href="#search-navigation" data-toggle="#search-navigation" class="ion-close search-overlay-toggle"></a>
					</div>
				<?php endif; ?>
			</div>
		</nav><!-- #site-navigation -->

After

		<?php if( function_exists( 'ubermenu' ) ): ?>
			<?php ubermenu( 'main' , array( 'theme_location' => 'secondary' ) ); ?>
			<div class="navigation-bar-wrapper">
				<?php
					wp_nav_menu( array(
						'theme_location' => 'primary',
						'container_class' => 'primary nav-menu',
						'menu_class' => 'primary nav-menu'
					) );
				?>
			</div>
		<?php else: ?>
			<nav id="site-navigation" class="main-navigation" role="navigation">
				<div class="container">
					<a href="#" class="navigation-bar-toggle">
						<i class="ion-navicon-round"></i>
						<?php echo listify_get_theme_menu_name( 'primary' ); ?>
					</a>

					<div class="navigation-bar-wrapper">
						<?php
							wp_nav_menu( array(
								'theme_location' => 'primary',
								'container_class' => 'primary nav-menu',
								'menu_class' => 'primary nav-menu'
							) );

							wp_nav_menu( array(
								'theme_location' => 'secondary',
								'container_class' => 'secondary nav-menu',
								'menu_class' => 'secondary nav-menu'
							) );
						?>
					</div>

					<?php if ( listify_theme_mod( 'nav-search' ) ) : ?>
						<a href="#search-navigation" data-toggle="#search-navigation" class="ion-search search-overlay-toggle"></a>

						<div id="search-navigation" class="search-overlay">
							<?php locate_template( array( 'searchform-header.php', 'searchform.php' ), true, false ); ?>
							<a href="#search-navigation" data-toggle="#search-navigation" class="ion-close search-overlay-toggle"></a>
						</div>
					<?php endif; ?>
				</div>
			</nav><!-- #site-navigation -->
		<?php endif; ?>

Center the Menu

You’ll also want to center the inner menu bar for this configuration and set the inner width to 1140px, as well as bound the submenus to the inner menu bar.