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

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Expanding Search Form in Nav Menu

This code enables you to add a expanding search form in the Navigation menu of any WordPress theme. The code is tested in the Genesis Sample child theme however it will also work in any other WordPress theme as it uses WordPress hook and not a theme specific hook.

Update : If using the latest Genesis Sample theme, use this new tutorial instead.

Here’s the expanding search box in action:

expanding-search-form

The code uses PHP to add the search form to the nav menu and CSS for the effects, No jQuery used.

Code Installation

  1. Add the PHP to the end of your child themes functions file.
  2. Add the CSS to the end of your child themes style.css file before the start of your CSS for Media Queries.

Non Genesis Theme Usage

Simply swap out the .genesis-nav-menu class in the CSS with the main class for your themes nav menu.

Here’s the code for logged in members:

Register for full access

Search

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems