Updated on May 16, 2018
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.
Screenshots:
Upon clicking:
Screencast:
Tested in Infinity Pro
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;
}
}
Great tutorial, but I have a couple of problems with it:
1) Using Edge browser, the ‘search’ magnifying glass icon also displays a couple of characters from the ‘Search this site’ text. Looks fine in Chrome, but I would like to cater for users with Edge as well.
2) When the menu collapses for small screens, the search icon is not displayed.
Any suggestions how I can fix these issues?
Thanks.
Could you share the code for Authority-Pro? I tried above but it didn’t work properly in Authority Pro.
Questions for you as I try this out on a site with infinity pro…
I don’t want it on the footer menu…what should I change to make that distinction?
The icon doesn’t show up when scrolled all the way to the top on the front page? Any thought’s on why it dissapears? faberinstitute.com
What do adjust the setting of how the search results are displayed?
Updated the code in Step 1 to ensure that the icon gets added only to the primary menu.
I do not see the icon on your site. Have you removed it?
How do you want them to be displayed?
Hi Sridhar! Sorry, I didn’t get a notification of your response. Thanks for adjusting the code to be only in the header. I got it working, but I did have to change the color to show up in the white navigation bar.
What I’m wondering is how to get the search results to show up in a simple list. Right now I have some extra CSS applied to format the blog page into a tile format and I think it’s messing with the search results. Any ideas?
You can copy search.php from the parent directory to your child theme and edit it to add the code that removes unwanted elements like content, entry-footer etc.
I published a tutorial with detailed steps on this but it’s for members-only.
https://sridharkatakam.com/custom-genesis-search-template-to-show-results-in-a-list/
[…] navigation-search.scss: styling for adding a search input to a navigation menu (based on this tutorial from Sridhar Katakam) […]
Hi Sridhar,
How would you integrate this in to the genesis sample theme? I’ve copied the code and sort of works but the you can’t see the magnify glass icon? Thank you.
You need to add the
font-family: "dashicons"; content: "\f179";
to the .search .search-form:before CSS class.Hi Sri,
Can you share the code of eleven 40 pro search icon for mobile only.
Hi Sridhar,
Should this be able to work with other Genesis themes like Parallax Pro?
Hi Sridhar,
Thank you for this. I’m using Magazine Pro. At first, it was not showing the magnifying glass icon, then I followed your instructions to add the font-family: “dashicons”; content: “f179”; to the .search .search-form:before CSS class.
I have tweaked a little bit on css to float my navigation menu list to left and the magnifying glass icon to the right.
You can see it here: https://androidscrib.com
Again, thank you for this great tutorial.
Thanks so much, Sridhar, worked perfectly!