Monochrome Pro has code for adding magnifying glass icon at the end of primary nav menu items which when clicked, displays a wide search form covering the full header.
I have published a tutorial that does this in Full width search form on top of header in Genesis tutorial in the past.
In this tutorial, I share the steps for adding the search icon to the right of a custom menu placed in Header Right widget area in Genesis Sample with code taken from Monochrome theme.
While the tutorial has been written for Genesis Sample, it should work with a few changes in any Genesis theme
Step 1
If you haven't already, at Appearance > Widgets drag a Custom Menu widget into Header Right widget area and select your desired header menu.
Step 2
Create a file named say, custom.js in child theme's js directory having the following:
Great tutorial, thanks! In the Monochrome StudioPress demo (I don´t have a setup) the possibility to search seems to be entirely gone when the hamburger menu kicks in. In your video, there´s no hint – is it the same, may I ask?
With this tutorial setup, the search icon will appear beneath the site title/logo. i.e., site title, search icon and hamburger menu icon in that order one below the other.
Ah, that´s great – thanks for the fast reply, Sridhar! 🙂
JUST WHAT I WAS LOOKING FOR! Thank you!
Sridhar, I am using Digital Pro theme and it doesnt have the ” Header Right widget area” so I am skipping step #1 therefore when I implement your tutorial the search area is showing over the navbar.
How do I add “Header Right widget area” ?
by deleting the following in Digital Pro’s functions.php:
Great tutorial.
It’s what I’m looking for but I’m not quite sure how to adapt this to the Genesis Starter Child Theme because of the mobile inline responsive menu.
I have it working great on my local site by commenting out the unregister_sidebar and unchecking the Primary Navigation menu box in the Edit Menu > Display Location section. When I resized the browser, it did not end up being responsive as I hoped.
I suppose what I am aiming for is having this feature appear at the end of the mobile inline responsive menu in your Genesis Starter Child Theme . It seems to be the most appropriate place to put a search form in an accessible manner.
It seems to me it would require a different set of functions than in Step 3?
In addition, due to WCAG standards, is it possible to add a submit button inside the responsive search form next to the magnifying glass when it pops out (since the magnifying glass becomes a cancel icon)?
If I am not clear enough, let me know. Thank you. It’s my first comment on your premium posts and I look forward to your response.