In Genesis Facebook group a user asked:
How do you add a search form to your Genesis theme (in your nav bar)? (I googled the same question and a whole lot of different answers came up). I read that this used to be included and now you can add some custom code but has anyone added a search form recently? I’m running the Infinity-pro theme.
Any idea on how to just add a magnifying glass to the navigation which expands into a search form when clicked?
This tutorial provides the steps to add a magnifying glass icon at the end of primary nav bar menu items in Infinity Pro, which when clicked will expand to show a search form. Typing a search query and hitting return will display the search results.
Clicking anywhere on the page when the search box is visible will fade it away.
Step 1
Add the following in Infinity Pro’s functions.php:
add_filter( 'wp_nav_menu_items', 'custom_nav_search', 10, 2 );
/**
* Add search box to nav menu.
*/
function custom_nav_search( $items, $args ) {
if ( 'primary' === $args->theme_location ) { // affect only Primary Navigation Menu.
$items .= '<li class="menu-item search">' . get_search_form( false ) . '</li>';
}
return $items;
}
Step 2
Add the following in Infinity Pro’s style.css:
.menu-item.search {
margin-left: 30px;
}
.nav-primary .genesis-nav-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-ms-flex-align: center;
-ms-flex-pack: center;
justify-content: center;
}
.search .search-form {
text-align: center;
}
.search .search-form input[type="search"] {
position: relative;
width: 1px;
padding: 8px 15px;
border: none;
border-radius: 4px;
background-color: transparent;
font-family: "Open Sans", sans-serif;
font-size: 13px;
cursor: pointer;
-webkit-transition: width 500ms ease, background 400ms ease;
transition: width 500ms ease, background 400ms ease;
}
.search .search-form input[type="search"]:focus {
width: 250px;
outline: 0;
background-color: #fff;
cursor: text;
}
.genesis-nav-menu .search input[type="submit"] {
clip: rect(0, 0, 0, 0);
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
}
.search .search-form:before {
top: 50%;
left: 50%;
width: 20px;
height: 20px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.home .search .search-form:before {
color: #fff;
}
.site-container.white .search .search-form:before {
color: #999;
}
@media only screen and (max-width: 862px) {
.nav-primary .genesis-nav-menu {
display: block;
}
}
@media only screen and (max-width: 800px) {
.menu-item.search {
margin-bottom: 10px;
margin-left: 20px;
}
.search .search-form:before {
position: absolute;
top: 10px;
left: 0;
color: #999;
-webkit-transform: none;
transform: none;
}
.search .search-form {
text-align: left;
}
.search .search-form input[type="search"] {
padding-right: 0;
padding-left: 0;
}
}