Display Search Inline With Genesis Responsive Mobile Menu When Toggled Open

By default, the search form, when added to the nav menu, is displayed within the drop down menu when toggled open. The solution available in this download folder for logged in members, enables you to :

  • Add the search form inline with your nav menu
  • Display your search form inline with your themes mobile menu icon while your menu is toggled open.

Genesis search bar in nav menu bar

Demo Video

Shows the search form added inline with the primary nav menu and displaying inline with the genesis responsive menu icon when the mobile menu is toggled open.

Tested using the Magazine Pro child theme by StudioPress however should work in most Genesis child themes with or without minor tweaking of the theme specific CSS.

Installation Steps

There’s 2 steps :

  1. # Copy & paste the PHP code ( without the opening PHP tag ) to the end of your child themes functions file.
  2.  

    In this case, the menu is added before the header.

  3. # Copy & paste the CSS to the end of your child themes style.css file and clear caching.
  4.  

Download Folder

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.