Salient (ThemeNectar)

Knowledgebase Docs » UberMenu 3
USEFUL? 26
UberMenu 3

Out of the box, Salient’s menu styles will interfere with UberMenu due to significant residual styling. Therefore we will use Manual Integration to replace Salient’s menu system with UberMenu. We will also make some special configurations in the settings to make UberMenu and Salient integrate more smoothly.

Manual Integration

The edited header.php file should be placed in the child theme. Keep in mind the theme’s header.php may change over time, so you would ideally make these changes in the most up to date version of the header.php included in your theme

Replacing the main menu

In Salient’s header.php, we will replace the existing menu with UberMenu.

Note that this code may have changed, so you’re looking for this similar area, including the mobile toggle button and nav section.

This code:

<?php if($has_main_menu == 'true' && $mobile_fixed == 'false' && $prependTopNavMobile != '1') { ?>
	<div class="slide-out-widget-area-toggle mobile-icon std-menu <?php echo $sideWidgetClass; ?>" data-icon-animation="simple-transform">
		<div> <a id="toggle-nav" href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
		</div>
<?php }

if (!empty($options['enable-cart']) && $options['enable-cart'] == '1') { 
	if ($woocommerce) { ?> 
		<!--mobile cart link-->
		<a id="mobile-cart-link" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><i class="icon-salient-cart"></i></a>
	<?php } 
} 

if($sideWidgetArea == '1') { ?>
	<div class="slide-out-widget-area-toggle mobile-icon <?php echo $sideWidgetClass; ?>" data-icon-animation="simple-transform">
		<div> <a href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
		</div>
<?php } ?>

<nav>
	<ul class="buttons" data-user-set-ocm="<?php echo $userSetSideWidgetArea; ?>">
		<li id="search-btn"><div><a href="#searchbox"><span class="icon-salient-search" aria-hidden="true"></span></a></div> </li>
	
		<?php if($sideWidgetArea == '1') { ?>
			<li class="slide-out-widget-area-toggle" data-icon-animation="<?php echo $sideWidgetIconAnimation; ?>">
				<div> <a href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
				</li>
		<?php } ?>
	</ul>
	<ul class="sf-menu">	
		<?php 
		if($has_main_menu == 'true') {
		    wp_nav_menu( array('walker' => new Nectar_Arrow_Walker_Nav_Menu, 'theme_location' => 'top_nav', 'container' => '', 'items_wrap' => '%3$s' ) ); 
		} else {
			echo '<li class="no-menu-assigned"><a href="#">No menu assigned</a></li>';
		}

		if(!empty($options['enable_social_in_header']) && $options['enable_social_in_header'] == '1' && $using_secondary != 'header_with_secondary') {
			echo '<li id="social-in-menu" class="button_social_group">';
			nectar_header_social_icons('main-nav');
			echo '</li>';
		}
		?>
	</ul>
	
</nav>

becomes:

<?php if( function_exists( 'ubermenu' ) ): ?>
	<?php ubermenu( 'main' , array( 'theme_location' => 'top_nav' ) ); ?>
<?php else: ?>

	<?php if($has_main_menu == 'true' && $mobile_fixed == 'false' && $prependTopNavMobile != '1') { ?>
		<div class="slide-out-widget-area-toggle mobile-icon std-menu <?php echo $sideWidgetClass; ?>" data-icon-animation="simple-transform">
			<div> <a id="toggle-nav" href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
			</div>
	<?php }
	
	if (!empty($options['enable-cart']) && $options['enable-cart'] == '1') { 
		if ($woocommerce) { ?> 
			<!--mobile cart link-->
			<a id="mobile-cart-link" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><i class="icon-salient-cart"></i></a>
		<?php } 
	} 
	
	if($sideWidgetArea == '1') { ?>
		<div class="slide-out-widget-area-toggle mobile-icon <?php echo $sideWidgetClass; ?>" data-icon-animation="simple-transform">
			<div> <a href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
			</div>
	<?php } ?>
	
	<nav>
		<ul class="buttons" data-user-set-ocm="<?php echo $userSetSideWidgetArea; ?>">
			<li id="search-btn"><div><a href="#searchbox"><span class="icon-salient-search" aria-hidden="true"></span></a></div> </li>
		
			<?php if($sideWidgetArea == '1') { ?>
				<li class="slide-out-widget-area-toggle" data-icon-animation="<?php echo $sideWidgetIconAnimation; ?>">
					<div> <a href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
					</li>
			<?php } ?>
		</ul>
		<ul class="sf-menu">	
			<?php 
			if($has_main_menu == 'true') {
			    wp_nav_menu( array('walker' => new Nectar_Arrow_Walker_Nav_Menu, 'theme_location' => 'top_nav', 'container' => '', 'items_wrap' => '%3$s' ) ); 
			} else {
				echo '<li class="no-menu-assigned"><a href="#">No menu assigned</a></li>';
			}

			if(!empty($options['enable_social_in_header']) && $options['enable_social_in_header'] == '1' && $using_secondary != 'header_with_secondary') {
				echo '<li id="social-in-menu" class="button_social_group">';
				nectar_header_social_icons('main-nav');
				echo '</li>';
			}
			?>
		</ul>
		
	</nav>
<?php endif; ?>

This code:

<?php if(has_nav_menu('top_nav')) echo '<a href="#mobilemenu" id="toggle-nav"><i class="icon-reorder"></i></a>'; ?>

<?php 
$sideWidgetArea = (!empty($options['header-slide-out-widget-area'])) ? $options['header-slide-out-widget-area'] : 'off';

if (!empty($options['enable-cart']) && $options['enable-cart'] == '1') { 
	if ($woocommerce) { ?> 
		<!--mobile cart link-->
		<a id="mobile-cart-link" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><i class="icon-salient-cart"></i></a>
	<?php } 
} 

if($sideWidgetArea == '1') { ?>
	<div class="slide-out-widget-area-toggle">
		<div> <a href="#sidewidgetarea" class="closed"> <i class="icon-reorder"></i> </a> </div> 
		</div>
<?php } ?>

<nav>
	<ul class="buttons">
		<li id="search-btn"><div><a href="#searchbox"><span class="icon-salient-search" aria-hidden="true"></span></a></div> </li>
	
		<?php if($sideWidgetArea == '1') { ?>
			<li class="slide-out-widget-area-toggle">
				<div> <a href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
				</li>
		<?php } ?>
	</ul>
	<ul class="sf-menu">	
		<?php 
		if(has_nav_menu('top_nav')) {
		    wp_nav_menu( array('walker' => new Nectar_Arrow_Walker_Nav_Menu, 'theme_location' => 'top_nav', 'container' => '', 'items_wrap' => '%3$s' ) ); 
		}
		elseif($sideWidgetArea != '1') {
			echo '<li><a href="">No menu assigned!</a></li>';
		}
		?>
	</ul>
	
</nav>

becomes:

<?php if( function_exists( 'ubermenu' ) ): ?>
    <?php ubermenu( 'main' , array( 'theme_location' => 'top_nav' ) ); ?>
<?php else: ?>
	<?php if(has_nav_menu('top_nav')) echo '<a href="#mobilemenu" id="toggle-nav"><i class="icon-reorder"></i></a>'; ?>
	
	<?php 
	$sideWidgetArea = (!empty($options['header-slide-out-widget-area'])) ? $options['header-slide-out-widget-area'] : 'off';

	if (!empty($options['enable-cart']) && $options['enable-cart'] == '1') { 
		if ($woocommerce) { ?> 
			<!--mobile cart link-->
			<a id="mobile-cart-link" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"><i class="icon-salient-cart"></i></a>
		<?php } 
	} 
	
	if($sideWidgetArea == '1') { ?>
		<div class="slide-out-widget-area-toggle">
			<div> <a href="#sidewidgetarea" class="closed"> <i class="icon-reorder"></i> </a> </div> 
			</div>
	<?php } ?>
	
	<nav>
		<ul class="buttons">
			<li id="search-btn"><div><a href="#searchbox"><span class="icon-salient-search" aria-hidden="true"></span></a></div> </li>
		
			<?php if($sideWidgetArea == '1') { ?>
				<li class="slide-out-widget-area-toggle">
					<div> <a href="#sidewidgetarea" class="closed"> <span> <i class="lines-button x2"> <i class="lines"></i> </i> </span> </a> </div> 
					</li>
			<?php } ?>
		</ul>
		<ul class="sf-menu">	
			<?php 
			if(has_nav_menu('top_nav')) {
			    wp_nav_menu( array('walker' => new Nectar_Arrow_Walker_Nav_Menu, 'theme_location' => 'top_nav', 'container' => '', 'items_wrap' => '%3$s' ) ); 
			}
			elseif($sideWidgetArea != '1') {
				echo '<li><a href="">No menu assigned!</a></li>';
			}
			?>
		</ul>
		
	</nav>
<?php endif; ?>

After editing the header.php, copy this file into the child theme that is included with Salient to preserve your changes next time you update

Delete the theme’s mobile menu

While not 100% necessary, save your install some processing and remove the theme’s mobile menu as well in the header.php

<div id="mobile-menu" data-mobile-fixed="<?php echo $mobile_fixed; ?>">
	
	<div class="container">
		<ul>
			<?php 
				if($has_main_menu == 'true' && $mobile_fixed == 'false') {
					
				    wp_nav_menu( array('theme_location' => 'top_nav', 'menu' => 'Top Navigation Menu', 'container' => '', 'items_wrap' => '%3$s' ) ); 
					
					echo '<li id="mobile-search">  
					<form action="'.home_url().'" method="GET">
			      		<input type="text" name="s" value="" placeholder="'.__('Search..', NECTAR_THEME_NAME) .'" />
					</form> 
					</li>';
				}
				else {
					echo '<li><a href="">No menu assigned!</a></li>';
				}
			?>		
		</ul>
	</div>
	
</div>

Configuring UberMenu Settings for best compatibility with Salient

Removing Residual Styling

Because Salient also applies more general menu styles, like this:

header#top nav > ul > li > a {
  padding-bottom: 33px;
  padding-top: 5px;
}

we will want to switch UberMenu’s container to div instead of nav in the UberMenu Control Panel > Main UberMenu Configuration > Miscellaneous > Container Tag

UberMenu Container Tag Setting

(Alternatively, you could remove the theme’s menu styles from its stylesheets, or alter the header to move the menu outside of the #top element. However, these routes are much more complicated and create more difficulties with future maintenance).

Recommended Skin

For the skin closest to the Salient default, set your UberMenu Skin to Vanilla

Menu Height & Vertical Alignment

To expand the height of the menu bar, in the Customizer, set the Top Level Vertical Padding to 30px.

To move the menu up a bit to align it with the logo, in the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout, set the Menu Bar Margin Top to -22px

Wider Submenus

If you would like to allow the submenus to be wider than your top level menu items/menu bar, in the UberMenu Control Panel > Main UberMenu Configuration > Position & Layout > Submenus, set Bound Submenu To to Unbounded

Result

Here’s the result after making the above changes:

UberMenu and Salient

Scrolled header

It has been reported that with current versions of Salient, this setting now works without UberMenu. Below is the advice if this setting does not work for you

When the page scrolls, the Salient menu becomes smaller. This is a feature of the theme menu, and won’t apply to UberMenu. So you can either disable it in the ThemeNectar Header Settings:

Salient header scroll setting

or, add this Custom CSS:

.small-nav .ubermenu-main{
  margin-top:-15px;
}
.small-nav .ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
  padding-top:18px;
  padding-bottom:18px;
}

Logo overlapping responsive toggle prevents menu opening

To prevent the logo from overlapping the menu toggle (which prevents the toggle from being clicked to open the mobile menu), add this Custom CSS:

header#top .col.span_3{
  position:relative !important;
}

Alternatively, if you want the toggle beside the logo, you can try this instead of the above:

#header-outer header#top .col.span_3{
	float:left;
	width:auto !important;
}

Mobile Menu Styles

To make the mobile menu a bit shorter and without margin, add this CSS in the Mobile CSS Tweaks

.ubermenu-responsive-toggle-main{
  margin-top:15px;
}
.ubermenu.ubermenu-main{
  margin-top:0;
}
.ubermenu.ubermenu-main .ubermenu-item-level-0 > .ubermenu-target{
  padding-top:18px;
  padding-bottom:18px;
}