This tutorial will provide you the steps to add a search icon in primary nav menu in Genesis, which when clicked, will show a search box covering the entire site header similar to Monochrome Pro, works great in JS disabled mode too.
Ohh! You are <3.
This guide is special because this is one of those tutorial features I have requested here, for myself. It was closed by Brian with words left "The items on this list might be a good fit for tutorials from someone in the community, however."
I thought, do I really need to depend on someone other to wait for this tutorial? Why Someone is other one and not me? I have started working on it and successfully implemented this in Genesis sample beta theme using Codes from Monochrome Pro theme.
For the first time, It was hard to extract the codes and now the result is awesome. This tutorial is going to be premium (I know it is bad) because I have invested a huge time working with it.
Default Mobile and Pc view.
when Javascript is disabled.
This tutorial can be easily implemented on any other Genesis child theme with minor tweaks.
Let's started...