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:-

desktop view
mobile view

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

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

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:-

desktop view
mobile view

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.

final result

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

Leave a Reply

Your email address will not be published. Required fields are marked *