Search box taking up too much room in your sidebar? Put it way up in the top navigation of Canvas.

This one took a little digging as I tried using the code to get the search box in the primary navigation, but it turns out that the top navigation doesn’t have a hook to put in a function easily so they had to recreate it. Thanks to the WOO help documentation where I found this gem of code below.

Here’s the code for the functions.php file:

/*-----------------------------------------------------------------------------------*/
/* Optional Top Navigation (WP Menus)  */
/*-----------------------------------------------------------------------------------*/
if ( ! function_exists( 'woo_top_navigation' ) ) {
function woo_top_navigation() {
  if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) {
?>
  <div id="top">
		<div class="col-full">
			<?php
				echo '<h3 class="top-menu">' . woo_get_menu_name( 'top-menu' ) . '</h3>';
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav top-navigation fl', 'theme_location' => 'top-menu' ) );
			?>

			<div id="nav-search" class="nav-search fr">
				<?php get_template_part( 'search', 'form' ); ?>
			</div><!--/#nav-search .nav-search fr-->

		</div>
	</div><!-- /#top -->
<?php
	}
} // End woo_top_navigation()
}

This is for the CSS file.

#top .searchform { background: #fff; margin-bottom: 5px; }

Here’s a screenshot of the final product.

It takes a bit more code, but still gets that search box up into the top navigation, way up there.

It takes a bit more code, but still gets that search box up into the top navigation, way up there.

Top nav is floated right and search on the left? Here’s the fix.

If, however, you have that top nav aligned or floated right, the search box will show up to the left of your (right-aligned) nav. If that works for you, you’re done. If you’d like that search box way over to the right, here’s the functions code you’ll need and the CSS.

If you float your nav right, you'll want to switch the order of things in the functions file.

If you float your nav right, you’ll want to switch the order of things in the functions file.

For the functions file:

/*-----------------------------------------------------------------------------------*/
/* Optional Top Navigation (WP Menus)  */
/*-----------------------------------------------------------------------------------*/
if ( ! function_exists( 'woo_top_navigation' ) ) {
function woo_top_navigation() {
  if ( function_exists( 'has_nav_menu' ) && has_nav_menu( 'top-menu' ) ) {
?>
  <div id="top">
		<div class="col-full">

			<div id="nav-search" class="nav-search fr">
				<?php get_template_part( 'search', 'form' ); ?>
			</div><!--/#nav-search .nav-search fr-->

			<?php
				echo '<h3 class="top-menu">' . woo_get_menu_name( 'top-menu' ) . '</h3>';
				wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'top-nav', 'menu_class' => 'nav top-navigation fl', 'theme_location' => 'top-menu' ) );
			?>

		</div>
	</div><!-- /#top -->
<?php
	}
} // End woo_top_navigation()
}

For the CSS file, we just floated the nav to the right.

#top .searchform { background: #fff; margin-bottom: 5px; height: 22px; }
#top .nav {float:right;}

Anything else?