• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

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

Register for full access

Related Search Form Solutions

  • Another Cool Expanding Search Box in Nav Menu

Search

Reader Interactions

Comments

  1. karimchedid says

    February 8, 2015 at 3:20 pm

    Does the 1st method works on genesis sample theme ?

    Log in to Reply
    • Brad Dalton says

      February 8, 2015 at 3:23 pm

      It was tested on the Executive Pro & Enterprise Pro themes however should work on Sample as well. May need slight tweaking of the CSS.

      Log in to Reply
  2. Andreas Giermaier says

    November 1, 2014 at 2:59 pm

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

    Log in to Reply
    • Brad Dalton says

      November 1, 2014 at 3:08 pm

      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.

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems