Here’s some CSS code which turns the search box in the primary nav menu into a expanding search box.
There’s 2 steps to make your primaryt nav menus search box slide out when the magnifying glass icon is clicked.
- CSS code
- Icon Images
Add Expanding Search Box To StudioPress Themes Using CSS
—
by
4 responses to “Add Expanding Search Box To StudioPress Themes Using CSS”
Does the 1st method works on genesis sample theme ?
It was tested on the Executive Pro & Enterprise Pro themes however should work on Sample as well. May need slight tweaking of the CSS.
Hi Brad I’ve been reading your blog now for a while, very very valuable content you share. thanks for that. But now I tried out one tipp of yours – it is adding the expanding seach box in my epik childtheme (genesis). But although I inserted the CSS and uploaded the pngs… just nothing happens. And when I add the genesis searchbox it shows as a huge searc field instead of a good looking small button…
what am I doing wrong?thank you anyways and greetings from Innsbruck (ever been to here in Austria?)
AndreasHello Andreas
Heard the skiing is world class in Innsbruck so one day on hope to visit your country.
I’m now providing premium support for installation and modification of code for use on different themes to members.
Membership also includes access to all members only, premium code for custom Genesis widgets and page templates.
Free
$0
Access only to all free tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Monthly
$75
Access to 10 premium tutorials per month.
Tutorial Request
Includes code guarantee and coding support.
Yearly
$500
Access to 15 premium tutorials per month.
Monthly Tutorial Request
Includes code guarantee and priority coding support.
Was This Tutorial Helpful?