This code adds a search icon to your nav menu and toggles open a search form wich displays below the icon like you see in the following gif image:
Update : Here’s a newer tutorial which includes CSS for media queries and enables you to add the icon for the drop down search form to the header menu.
Installation #
There’s 3 steps to install the code from the download folder to your theme :
- Using a code editor, add the PHP code from the functions.php file to the end of your child themes functions file.
- Add the CSS from the style.css file to the end of your child themes style.css file, before the Media Queries.
- Upload the search.js file to your child themes js folder.
Note : The icon is added to the primary nav menu. If you want it added to any other nav menu, you will need to modify the PHP code, support for code modification is included for registered users. The icon cannot be added to the nav menu widget.
Here’s the code:
Was This Tutorial Helpful?