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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

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

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.