Sridhar Katakam

Genesis and WordPress Tutorials

How to set up animated Search form in Genesis

by 52 Comments

Today a user mailed:

I just simply want to add a search feature on the primary menu of my site. I am using Genesis theme and Altitude Pro theme. The site is ----.com. I tried doing it myself, but nothing seems to work... that is how I found your site. I saw your tutorial. I'd really like something similar to this: theconnectionproject.org. You can see it's just a magnifying glass in the header and it expands the search when you click on it.

In this tutorial I share how a search icon can be added as the last item of Primary Navigation in Altitude Pro, which when clicked will show the search form in a smooth animated fashion. Clicking anywhere on the webpage will close the search form.

Genesis Sample 2.2.3 child theme specific steps are near the bottom.

animated-search-genesis

The code below is generic and may need to be modified a little based on which theme is currently active.

Step 1

Create a file named say, global.js inside a 'js' directory under the child theme having the following code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • Oh, this is great. Thank you!

    What would I have to change if I wanted the search icon to show in the secondary navbar instead?

    Reply

  • Oh, never mind. I found it.

    Just add ‘secondary’ instead of ‘primary’ in the functions.php and adjust the css.

    Reply

    • How did you manage to do this? In my case, when I change to secondary, the search form appears on another line and has the dot in front of it..

      Reply

  • Hi.

    Thank you,Its very useful and nice.

    What about if I want to put in a Menu widget? i don’t know what I have to changue.

    Any idea?

    thanks!!

    Reply

  • Just checking I looked at your test example and the search button does not work on mobile ?

    What would be the best solution for this ?

    Reply

  • Hi Sridhar. Thanks so much for this and your other tutorials. Joined in a heartbeat when I saw the membership fee.

    Question: how would I integrate this with the WooCommerce product search function. I want it to return products only, so the native woocommerce search would be best. I’d still like the style to be the JS dropdown, but the results to be from the woocommerce product search. I hope that helps clarify.

    Thanks again!

    Reply

  • Has anyone had any luck executing this with a custom menu in the ‘Header Right Widget Area’?

    Reply

  • this is great Sridhar thanks!
    the only thing is my icon is not visible…has anyone else encountered this?

    Reply

  • Hello,
    Anyone get this to work in Dynamik?

    I’m unable to get this to work.

    What I’ve tried:
    – Added the js to Dynamik Custom Options
    – Removed enqueue of js and font awesome (fa is enabled in Dynamik already)
    – Tried in both primary and secondary menu locations

    The search icon appears, but nothing happens when clicking. Firebug Console is showing no errors.

    Reply

  • Hi,
    Thanks for this great tutorial. It seems to work for many people.
    I’ve tried it with Altitude Pro and followed the video instruction for Agency Pro.
    In both I don’t get the icon but the search field with the Go button.

    Any Idea?

    Thanks,
    Jon

    Reply

  • Hi Sridhar,
    Thank you for your great work.
    I tried to follow your tutorial but two thing:
    in firefox the box appears and no icon. In chrome appears the icon but if I click on this nothing happens.
    What can be?
    Do you have any advice?
    PS: I have Altitude pro theme
    Thank you
    Stefano

    Reply

  • Hi Sridhar. Thank you very much for your help and availability. You’re really nice and prepared.
    Last thing, there is a way to disappear the search box also if I click on the magnifyng glass and not only in the out space?
    Stefano

    Reply

  • Hi Sridhar,

    Thanks for the wonderful tutorial.
    I used this tutorial on Atmosphere Pro theme which is missing search option. everything is working great as far a functionality is a concern.

    The real concern is whenever I am pressing go button in the search box, text “Go” is getting enlarge.

    You can check it on http://www.financialengineer.in/

    Can you please help me to get rid of this enlargement of ‘go’ button after pressing it.

    Thanks in advance.

    Reply

  • When I apply step 2…I copy and paste all of the code at the bottom of the functions.php file and after I upload it to my website. I completed all of the other steps as well and my website gets an error. When I remove the code from functions.php that I added my website comes back up. Any ideas of why this would be causing an error 500? (Google Chrome)

    Thank you,

    Josh

    Reply

  • Works great! But is there a way to place the search toggle to the left or right of the responsive menu in mobile?

    Reply

  • Anyone tried this with Infinity Pro? Following the tuts above the icon appears but nothing happens when clicked on (Chrome)?

    Reply

    • In the Genisis Sample theme, I have to remove the `padding: 15px 23px 14px; color: #0a0a0a; background: #fff; ` from the Screen Reader Text CSS. Otherwise, when you click on the button the `input[type=”submit”]:focus` doesn’t match the form anymore. Is that ok or will it make the site less accessible?

      `
      .screen-reader-text:focus,
      .screen-reader-shortcut:focus,
      .genesis-nav-menu .search input[type=”submit”]:focus,
      .widget_search input[type=”submit”]:focus {
      clip: auto !important;
      height: auto;
      width: auto;
      display: block;
      font-size: 1em;
      font-weight: bold;
      /* padding: 15px 23px 14px;
      color: #0a0a0a;
      background: #fff; */
      z-index: 100000; /* Above WP toolbar. */
      text-decoration: none;
      box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
      }
      `

      Reply

  • Would love to have this on Infinity Pro but using WooCommerce Product Search. Is this possible?

    Reply
    • >