I found this the trickiest bit, this is the search icon that will sit to the right of the primary nav menu which means it will need to sit inside the nav container. There is a filter wp_nav_menu_items that allows you to append mark up to the nav menu.
So here the filter will only apply to the primary menu, the existing primary menu list is closed and another one added to contain the search toggle icon. With some CSS floats added these can float left and right and both sit in the nav element and the 2 lists, menu and icon can be controlled separately.
Full functions.php
Add the jQuery
Create the jQuery to show and hide the search box based on the toggle this should be filed in your js folder and also enqueued, I have named my example hidesearch.js, this is shown in the full functions.php gist above.
Add in a whole bunch of CSS to bring it to life.
And this is the result:
Search Closed
Search Open
Demo here, for the mobile menu I use slick nav menu and had a small CSS positioning change for both the menu and search icon to sit alongside each other.
Exactly what I was looking for and its works like a charm. Only problem I have is that it only works on the home page. It changes colors on hover on the other pages but a click does not open the search box. I’m using Genesis Framework with the Smart Passive Income Theme.
“Demo here, for the mobile menu I use slick nav menu and had a small CSS positioning change for both the menu and search icon to sit alongside each other.” is there a link for a tutorial that can show us that?
This is likely due to the priority or the hook, try the priority first in the code – find this bit in the code – add_action( ‘genesis_after_header’,’themeprefix_search_widget’ ); and change it to add_action( ‘genesis_after_header’,’themeprefix_search_widget’, 20 );
Hi
I tried to add as you said. But my search button isn’t working. Help please?
My website is feedough.com
update – the search box is working at the top but the search box doesn’t appear when I scroll down.
How do I add the containers if the widget only has a title area to insert text?
How do I get this to work on a custom menu (not primary or secondary)?
Exactly what I was looking for and its works like a charm. Only problem I have is that it only works on the home page. It changes colors on hover on the other pages but a click does not open the search box. I’m using Genesis Framework with the Smart Passive Income Theme.
“Demo here, for the mobile menu I use slick nav menu and had a small CSS positioning change for both the menu and search icon to sit alongside each other.” is there a link for a tutorial that can show us that?
Hey any chance you could help? Mine keeps going about the menu? http://birdanddesign.com/
This is likely due to the priority or the hook, try the priority first in the code – find this bit in the code – add_action( ‘genesis_after_header’,’themeprefix_search_widget’ ); and change it to add_action( ‘genesis_after_header’,’themeprefix_search_widget’, 20 );
Great Tutorial! Thank you so much!
Hello,
its cool, but is it possibble get it working with woocommerce search?
Thanks you
Is there a way to make this work outside the primary menu?
How do I insert into the Secondary Navigation Menu in the magazine pro?