WP SITES

3099 Coded Tutorials & 300 Plugins

Expanding Search In Nav Menu

—

by

Brad Dalton

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 to code & support

Related Search Form Solutions

Was this helpful?

Yes
No
Thanks for your feedback!

6 responses to “Expanding Search In Nav Menu”

  1. KMW Avatar
    KMW

    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?

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      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?

      Reply
      1. KMW Avatar
        KMW

        Thanks for replying. I’m using Enterprise Pro.

        Reply
        1. Brad Dalton Avatar
          Brad Dalton

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

          Reply
  2. webprodevco Avatar
    webprodevco

    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

    Reply
    1. Brad Dalton Avatar
      Brad Dalton

      Thanks

      Reply

Leave a Reply