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.
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
Download source from here (direct link to zip file) and extract it.
fonts folder to child theme directory and delete
codropsicons directory from the server as it's not needed.
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.