• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Search Toggle in Nav Menu With Magnifying Glass Icon

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:

search

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 :

  1. Using a code editor, add the PHP code from the functions.php file to the end of your child themes functions file.
  2. Add the CSS from the style.css file to the end of your child themes style.css file, before the Media Queries.
  3. 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:

Register for full access

Related Tutorials

  • Drop Down Nav Menu Search Form
  • Expanding Search In Nav Menu

Nav Menu Search

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.