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
wp_nav_menu_itemsfilter to add the search form at the end in Primary nav
- Add CSS
Step 1Download source from here (direct link to zip file) and extract it. Upload
fontsfolder to child theme directory and delete
codropsiconsdirectory from the server as it's not needed. Upload
jsfolder to child theme directory. Create a file named expanding-search-init.js in the
jsdirectory having the following:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.