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

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

Expanding Search In Nav Menu

This code creates a expanded search box which you can use in any menu location like this:

Expanding Search In Menu

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:

Register for full access

Related Search Form Solutions

  • Expanding Search Box In Header Right – Genesis Sample Theme
  • Animated Search Form in Nav Menu
  • Add Expanding Search Box Using CSS
  • Genesis Full Screen Slide Down Overlay for Search Box
  • Drop Down Nav Menu Search Form

Search

Reader Interactions

Comments

  1. KMW says

    January 18, 2017 at 9:59 am

    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?

    Log in to Reply
    • Brad Dalton says

      January 18, 2017 at 1:22 pm

      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?

      Log in to Reply
      • KMW says

        January 18, 2017 at 3:53 pm

        Thanks for replying. I’m using Enterprise Pro.

        Log in to Reply
        • Brad Dalton says

          January 18, 2017 at 4:10 pm

          You’ll need to tweak the CSS for use on themes other than the theme its tested on which is the Sample theme.

          Log in to Reply
  2. webprodevco says

    January 9, 2016 at 2:16 pm

    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

    Log in to Reply
    • Brad Dalton says

      January 9, 2016 at 5:16 pm

      Thanks

      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.