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

Was This Tutorial Helpful?

Free

$0

Access only to all free tutorials per month.



Monthly

$75

Access to 10 premium tutorials per month.


Tutorial Request


Includes code guarantee and coding support.

Yearly

$500

Access to 15 premium tutorials per month.


Monthly Tutorial Request


Includes code guarantee and priority coding support.