Genesis Tutorials

Add Expanding Search Box To StudioPress Themes Using CSS

Here’s some CSS code which turns the search box in the primary nav menu into a expanding search box.

Sliding out search box

There’s 2 steps to make your primaryt nav menus search box slide out when the magnifying glass icon is clicked.

  1. CSS code
  2. Icon Images

Related Search Form Solutions

4 replies on “Add Expanding Search Box To StudioPress Themes Using CSS”

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?)

Hello 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.

Leave a Reply

Your email address will not be published. Required fields are marked *