Edwards (WP for Church)

The Edwards theme creates residual styling that interferes with the menu, so we will use Manual Integration to replace the theme’s menu with UberMenu.

Manual Integration

1. Copy your header.php into a child theme

2. In the child theme’s header.php, find this code around line 98:

			<nav role="navigation" class="site-navigation main-navigation <?php if($edwards_logo) : echo 'logo'; else : endif;?>">
				<h1 class="assistive-text"><?php _e( 'Menu', 'edwards' ); ?></h1>
				<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'edwards' ); ?>"><?php _e( 'Skip to content', 'edwards' ); ?></a></div>

				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- .site-navigation .main-navigation -->

This is the theme’s menu.

3. Conditionally replace the theme’s menu with UberMenu:

			<?php if( function_exists( 'ubermenu' ) ): ?>
				<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>
			<?php else: ?>
				<nav role="navigation" class="site-navigation main-navigation <?php if($edwards_logo) : echo 'logo'; else : endif;?>">
					<h1 class="assistive-text"><?php _e( 'Menu', 'edwards' ); ?></h1>
					<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'edwards' ); ?>"><?php _e( 'Skip to content', 'edwards' ); ?></a></div>

					<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
				</nav><!-- .site-navigation .main-navigation -->
			<?php endif; ?>

UberMenu Settings

Menu Bar Alignment

If you’d like to position the menu to the right of the logo, set the Menu Bar Alignment to “Right” in the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout > Menu Bar

Submenu Width

If you would like to allow the submenus to expand beyond the extents of the menu bar, set the Bound Submenu To setting to “Unbounded” in the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout > Menu Bar

Then add this CSS in your CSS Tweaks if you wish to bound the submenu to the content area of the site:

#masthead .wrapper{
	position:relative;
}