Add a Search Box in the Primary Navigation of Canvas

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.

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.

<?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;
    }
}