WP Sites Drop Down Nav Menu Search Form

This tutorial shows you how to create a widget area which only opens when you click a link. In this case, the link is added to a nav menu item.

By default, the widget area is hidden and slides down when opened. You can add the Genesis search widget, the WordPress search widget or any other type of search widget to the new widget area.

Here’s what the code produces on the Genesis Sample child theme by StudioPress.

The solution uses a tiny bit of jQuery to toggle the widget open and close.

You can also very easily change the nav menu link to a magnifying glass icon using Dashicons or Font Awesome icons.

Here’s the code which makes the search form open when the nav menu link is clicked.

Code Installation

1. The PHP code gets added at the end of your child themes functions file.
2. Add the jQuery in a new file named toggle.js using a code editor and upload to your js folder in your child themes root directory.

Once you’ve installed the code, add the link to a new nav menu item named search like this:

Note: You may need to enable the CSS Classes field using the screen options in the top right hand corner of your screen.

You can then populate the new widget area with the native search widget or any other search form like Google custom search as one example.

Here’s some sample CSS you can modify to your own liking.

You may need to add back the search forms submit button if your theme has removed it.

.toggle-widget { 
   display: none; 
}

.toggle-widget {
  margin-top: 50px;
}

.toggle-widget .search-form input {
	width: 66%;
	font-size: 35px;
}
 
.toggle-widget .widget_search input[type="submit"] {
	background-color: #0099CC;
	font-size: 30px;
	float: right;
	width: 32%;
}

Related Tutorials

• Genesis Full Screen Slide Down Overlay for Search Box
• Expanding Search In Nav Menu
• Search Toggle in Nav Menu