Sridhar Katakam

Genesis and WordPress Tutorials

Expanding Search Bar by Codrops in Genesis

by 12 Comments

In this tutorial I show how Expanding Search Bar can be implemented in Genesis.

We are going to add a mobile-friendly flyout search box in Primary Navigation. Initially only the magnifying glass icon will be shown which when clicked, smoothly opens to its left to show the search box. After typing a search term, users can either hit Enter/Return or click on the search icon to initiate the search. When the search input is open, it can be closed either by clicking anywhere on the page or on the search icon.

Screenshots:

2015-05-26_10-16-44

2015-05-26_10-17-01

Summary of steps:

  • Enqueue necessary JS
  • Replace standard Genesis Search Form markup with a custom one using genesis_search_form filter
  • Use wp_nav_menu_items filter to add the search form at the end in Primary nav
  • Add CSS

Step 1

Download source from here (direct link to zip file) and extract it.

Upload fonts folder to child theme directory and delete codropsicons directory from the server as it's not needed.

Upload js folder to child theme directory.

Create a file named expanding-search-init.js in the js directory having the following:

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

Already a member? Log in below or here.

  • Hi Sridhar – thanks for the great info here – very useful. I’ve got one problem with the implementation and that is that in Firefox the search icon seems to be missing. It seems fine in both Chrome and Safari (although not Safari on the iPhone).

    Any ideas on how to fix that?

    Staging site URL is: http://bibleleagueca.wpengine.com/

    Reply

  • Hi Sridhar,
    Question how can I disable on mobile while using our in desktop? Any css to hide it?
    Thanks

    Reply

  • I couldn’t get the icomoon fonts to display, despite adding the @font-face in style.css, so I decided to try using dashicons instead. Only had to change the CSS in two places (apart from color adjustments).

    Reply

  • Hi Sridhar,

    Worked great for me; thank you. However, client would prefer that the icon/expanding search bar appear in header right widget area only and not in the primary navigation. Can you help?

    Thank you!
    Jennifer

    Reply

  • Hey great!
    Made it work in Generate Pro.
    One thing though I would like this implementation to do:

    When the search box expands it should overlay over the other menu items. Right now, if I have to many items in the primary navigation, the search bar gets pushed down and is visible underneath the menu items.

    While I could just change the max-width from 500px to 400px it is much more preferable if the search bar worked regardless of the number of items in the primary navigation. If you can expand this tutorial or write another one where this feature is possible I’d be very grateful.

    Thanks.
    Best regards

    Reply

  • hi sridhar– thanks for the info here.

    im bumping into an issue with the placement of the search bar. instead of appearing in the primary nav, i’d like it to appear in the utility bar that i created using this tutorial: https://sridharkatakam.com/utility-bar-in-dynamik/
    what do i need to change in the functions above to make that work?

    Reply
    • >