This code creates a expanded search box which you can use in any menu location like this:
Update : Here’s a newer solution which uses pure CSS, no Javascript.
Code Installation #
The code is already pre-installed in the Genesis Sample child theme by StudioPress.
However, if you want to install the code in another theme, follow these simple steps:
Add the js, css & fonts folders to your child themes root directory.
Copy all the PHP code for both these function names below from the functions.php file and paste into your child themes functions file:
function expanding_search_scripts_styles
function primary_expanded_search
Simple as that. CSS may need tweaking for use on child themes other than the Sample theme.
Download Theme with expanding search form:
Hi.
How would I change this so the search form opens on top (overlay) of the menu link to the left of the search icon as opposed to pushing the search box down below the menu items when open?
If you look at the animated gif image above, it doesn’t push the search box below the menu, it expands within the nav menu div.
What theme are you using?
Thanks for replying. I’m using Enterprise Pro.
You’ll need to tweak the CSS for use on themes other than the theme its tested on which is the Sample theme.
I was having an issue with returning search results with your theme file and I found the reason.
In the functions file:
The name was “search” which resulted in this:
http://www.domain.com/?search=keyword
However, for it to work for me, I had to change name to “s” to return this:
http://www.domain.com/?s=keyword
Thanks