Add a Search Box in Primary Navigation

How to add a search box in primary menu of a genesis theme which is located at the site header. This is applicable for secondary menu also.

First of all, add the following code inside the functions.php file:

// Add a Search Bar to PRIMARY Navigation Menu
add_filter( 'wp_nav_menu_items', 'theme_menu_extras', 10, 2 );
function theme_menu_extras( $menu, $args ) {
if ( 'primary' !== $args->theme_location )
return $menu;
$menu  .= '<li class="search-bar">' . get_search_form( false ) . '</li>';
return $menu;
}

If you want to add a search box in secondary menu, you need to change the word, “primary” to “secondary”.

After adding the code the the site header will look like:-

Now add the following code inside media only screen section of style.css:-

.genesis-nav-menu > .search-bar {
float: right;
}

Now, we should either remove the search button or place the button inline with the search box. To achieve this we need to make some modification in our style.css file.

.search-form input[type="search"] {
width: 60%;
float: left;
}

Now the site header will look good as follows:-

Finally, if you would like to hide the search button, you need to add the following codes inside style.css:-

.genesis-nav-menu .search-form input[type="submit"] {
display: none;
}
.search-form input[type="search"] {
width: 100%;
float: left;
}

The new looks will be cleaner.

For further fine tuning, you need to add the following code into style.css

/* Search Form
 --------------------------------------------- */
 .genesis-nav-menu .search-form input[type="submit"] {
     display: none;
 }
 .search-form input[type="search"] {
     width: 160px;
     float: left;
     font-size: 14px;
     padding: 10px 15px;
     background-color: #ddd;
 }