Salient (ThemeNectar)

Are you using UberMenu 3? Be sure to check out the Updated Salient Integration Guide

Salient’s menu system causes some residual styling issues because of the way it is coded. This guide will help you eliminate those issues and integrate UberMenu, as well as emulate some of the Salient menu styles. (Last revision: Salient v4.0.2)

Here’s the final result:

(Child theme available at the end)

Removing Residual Styling (Critical)

Salient’s wp_nav_menu function is wrapped in a static nav and ul elements, rather than using the standard container and items_wrap parameters. Therefore when UberMenu is activated it is wrapped in an extra ul and everything appears broken.

Here is the relevant code in Salient’s header.php

					<a href="#" id="toggle-nav"><i class="icon-reorder"></i></a>
					
					<?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 } 
					} ?>
					
					<nav>
						<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' ) ); 
							}
							else {
								echo '<li><a href="">No menu assigned!</a></li>';
							}
							?>
							<li id="search-btn"><div><a href=""><span class="icon-salient-search" aria-hidden="true"></span></a></div></li>
						</ul>
					</nav>

We need to change it to simply

<?php 
if(has_nav_menu('top_nav')) {
    wp_nav_menu( array( 'theme_location' => 'top_nav' ) ); 
}
else {
    echo 'No menu assigned!';
}
?>

(You can leave in the WooCommerce cart code if you wish)

Then we add some CSS. The first bit is to overcome Salient’s image resizing (which prevents the UberMenu images from displaying properly – be sure to change this to the appropriate width). The second bit makes the UberMenu taller so that it fits in the header better

#megaMenu li.menu-item > * > img{
	width:16px; /* Necessary if you are resizing images */
}
#megaMenu{
	margin-top:-16px;
}
#megaMenu ul.megaMenu > li.menu-item > a, 
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator{
	padding-top:20px;
	padding-bottom:20px;
}

Remove mobile menu

Then we need to remove the mobile menu:

<div id="mobile-menu">
	
	<div class="container">
		<ul>
			<?php 
				if(has_nav_menu('top_nav')) {
					
				    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>

and the toggle button

<a href="#" id="toggle-nav"><i class="icon-reorder"></i></a>

Emulating Salient Styles (Recommended)

Menu Styling Basics

1. Set your Header Padding to 16 in the Salient Header Settings

2. Disable “Resize Header on Scroll” in the Salient Header Settings

3. Use the Vanilla UberMenu Skin for the best match with Salient’s header styles.

Align your menu items to the right

To align your menu items to the right, add

#megaMenu.megaMenuHorizontal ul.megaMenu{
    text-align:right;
}
#megaMenu.megaMenuHorizontal ul.megaMenu > li.menu-item{
    float:none;
    vertical-align:top;
}

Switch the submenu indicators

If you want to use the submenu indicators provided by Salient, add this CSS:

#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > a:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after,
#megaMenu ul.megaMenu li.menu-item.mega-with-sub > span.um-anchoremulator:after, #megaMenu ul.megaMenu li.menu-item.ss-nav-menu-mega > span.um-anchoremulator:after{
  content:"\f107";
  font-family:'FontAwesome';
  border:none;
  font-size:inherit;
  color:#222;
  margin-top:-9px;
}
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > a:after,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-reg li.menu-item.megaReg-with-sub > span.um-anchoremulator:after{
  content:"\f105";
  right:10px;
}

Adding the Salient Search

Enable Content Overrides, create a custom menu item, disable link and text, and add the following markup to the Content Override.

<div id="search-btn"><a class="search-btn"><span class="icon-salient-search" aria-hidden="true"></span></a></div>

Add this CSS to make the icon visible:

#megaMenu #search-btn{
    padding:10px 0;	
}
#megaMenu .icon-salient-search{
    color:#000;
}

Child Theme

Here’s a child theme that will do all of this for you

After installing and activating the child theme, don’t forget to re-assign the menu to the Top Navigation Menu theme location and activate this theme location as an UberMenu

Download Child Theme