Do you want to have a search option in your navigation menu, but like the style of just having the search icon there instead of the full box? This is how it will look:
Then when you click on it, the full search box will show up.
Add this code to your functions.php file.
Then you will need to add this to your style.css file. Note, I have customized this css for the Outreach Pro theme. Your theme might differ slightly.
/* Menu Search ---------------------------------------------------------------------------------------------------- */ .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; margin-left: -10px; } .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%); font-family: "dashicons"; font-size: 20px; content: "\f179"; } .home .search .search-form:before { color: #333; } .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 { 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; } }
As always, be sure to backup your site before making any changes to your functions.php file and make sure you have ftp or cpanel access to your files, just in case you make a mistake and it takes your site down.
Please note that I got a good start on this technique from Sridhar Katakam. He used it on the Infinity Pro theme.
I hope this helps!
Adam says
Hi there, thanks very much for the code. Works well, except your functions code has ‘<’ and ‘>’ displayed in it.
They need to be replaced with html closing and opening tags.
Laura Hartwig says
Thanks for catching this! Each time I tried to fix it, it would change it back to the HTML, so I had to screen capture it in the end. Sorry for any confusion.
Jill says
Hi. Thanks for that, but I don’t get the search box and button displaying on the menu bar, not the icon. Is there something else I need to add/install?
Laura Hartwig says
Do you have a link to your site? And I assume you still have dashicons active on your site? They should be there by default.
Jill says
Using the Genesis-Sample theme. Dashicons is in the functions file. Site is: https://fuerteventuranow.com/
Laura Hartwig says
Hi Jill, Did you add that CSS as well? Specifically, I’m not seeing the .search-form:before attribute. That’s kinda the key to this whole thing.
Jill says
Yes. I copied and pasted the css above and then uploaded the style sheet.
Laura Hartwig says
I’m sorry. I’m not seeing this in your CSS file. In the Appearance > Customize area, there should be a place for Custom CSS. Perhaps try placing it there?
Jill says
OK, so this is REALLY strange and I have NEVER had this happen before.
I reuploaded my style sheet in case something didn’t go right when I uploaded it before. No difference.
I double checked the code – deleted it, recopied and repasted and reuploaded – nothing
So I gave in and added it online at Appearance > custom CSS – and it works!
What the heck?
No idea what is happening. I ALWAYS add code to files offline and upload and never had a problem. Very, very strange!
Thanks.
Laura Hartwig says
I’m glad it finally worked for you! It probably had something to do with your files being minified and cached. Thanks for reading my blog and for letting me know this worked for you!
Lynsey Wagener says
Why is there just an image above? why can’t i copy the code?
Laura Hartwig says
WordPress keeps converting the code and would not display it as it should be so I had to screenshot it. If you read the other comments below, you’ll see there was a problem.