WP SITES

Log in

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

Related Search Form Solutions

Comments

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?

    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?

      1. KMW Avatar
        KMW

        Thanks for replying. I’m using Enterprise Pro.

        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.

  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

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.