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="https://sridharkatakam.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="https://sridharkatakam.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.
Step 1
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.
Looking at integrating this into your Sample theme, but unsure as there is no header right widget. Any hints would be greatly appreciated.
I have updated the tutorial to remove the search icon from being added in a text widget and instead add via functions.php.
I will test it in my modified Genesis Sample and let you know soon.
Awesome. thank you.
I have updated the tutorial and added Genesis Sample Starter child theme specific instructions.
[…] have published a tutorial that does this in Full width search form on top of header in Genesis tutorial in the […]