The other day I received an email from Mediafox asking if I want to have a chat with them for a potential job. While I am not interested in that, what I did find interesting is the search form implementation on their site. Clicking on the search icon in the header nav brings up a wide search form 'in-place' appearing on top of the header. The search form can be dismissed by clicking on the x close icon or anywhere on the webpage.
In this article I share the steps for implementing the same in Genesis. The code is simplified from the one in Mediafox website.
<img src="http://4fhgrs211xix9ccov1guxqzo-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/genesis-full-search-icon.png" alt="genesis-full-search-icon" width="1552" height="934" class="alignnone size-full wp-image-9823" style=“border: none;" />
<img src="http://4fhgrs211xix9ccov1guxqzo-wpengine.netdna-ssl.com/wp-content/uploads/2016/05/genesis-full-search-open.png" alt="genesis-full-search-open" width="1552" height="934" class="alignnone size-full wp-image-9824" style=“border: none;" />
While the tutorial has been written for Genesis Sample 2.2.3 it should work with some adjustments in any Genesis child theme.
Create a file named say, general.js in the child theme's
js directory (create if not existing) having the following code:
To view the full content, please sign up for the membership.
Already a member? Log in below or here.