Expanding Search Bar by Codrops in Genesis

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:

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: