If you’d like to have a search box, but don’t want it bulking up your sidebar, drop it into the primary navigation on the right.

Uncheck the Subscribe button

Make sure the Subscribe Icon option is unchecked.

The search box is a powerful feature of your site if you have a ton of content. It’s a good idea to make sure the search box is easy to find for those who like to use it. Here’s how to add a bit of code and get that working.

[box type=”info”]Don’t forget to uncheck the box so you don’t also show the Subscribe icon in the primary nav.[/box]

This is under Canvas –> Styling & Layout –> Primary Navigation. Once you have that unchecked, you’re ready to add some code to your functions.php file and your CSS file. If you’d like a video on how to do that, here’s one from a previous lesson doing a very similar task: Add a search box in the top navigation of Canvas. Thanks for the code from a helpful WOO blog post: How to Create a Unique WordPress Website: 15 Top Hacks for Canvas.

This goes into your functions.php file.

add_action( 'woo_nav_inside', 'custom_nav_searchform', 10 );

function custom_nav_searchform () {
    echo '<div id="nav-search" class="nav-search fr">' . "
";
    get_template_part( 'search', 'form' );
    echo '</div><!--/#nav-search .nav-search fr-->' . "
";
}

A quick note about the functions.php file. I usually just put in the extra or new code that you’ll need for your functions.php file, but just in case you don’t have a functions file yet, you will need these two bits of code in there at the beginning and at the end.

[box type=”note”]Update: I created a new help file: Editing the functions.php file.[/box]

<?php

in here is where all of the functions go

?>

This is for your CSS file:

#nav-search .icon-search {
position: absolute;
right: 9px;
}

#nav-search {
margin-right: 9px;
top: 10px;
}

If you’d like the background of the search box to be white, add this to the CSS as well:

#nav-search .search_main .searchform {
background-color: #fff;
}

Mobile & Responsive

On your mobile device, the search box is still in there with the WOO Canvas mobile/responsive nav. Unless you change some CSS, it’s going to also be “floated right.” If that works for you, great. If your navigation text is long (many letters/words), it might get in the way. One quick and dirty fix is to just remove or hide it from the mobile view. Here’s the CSS to do so.

@media only screen and (max-width: 767px) {
    .search_main {
        display:none !important;
    }
}
It's a bit large of a box for mobile, so one option is to just hide it.

It’s a bit large of a box for mobile, so one option is to just hide it.

You can also choose to just let it be and it'll be there floating right.

You can also choose to just let it be and it’ll be there floating right.

[divider_flat] Here’s a screenshot of the search box in the right side of the primary navigation in WOO Canvas.

Search box happily living in the primary nav.

Search box happily living in the primary nav.