• 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

Drop Down Search Toggle in Header Nav Menu With Magnifying Glass Icon

This code adds the Magnifying Glass Icon for the drop down search form to the header menu.

In this case, the secondary menu is repositioned to the site header like this :

Tested using the Enterprise Pro child theme by StudioPress however should work fine in most genesis child themes without modification.

This code has been taken from this tutorial and extended to work with the Enterprise Pro theme.

Demo Video #

Shows the search form tested using the Enterprise Pro child theme on Genesis. Tested on desktop and mobile screens.

Installation #

There’s 3 steps relating to usage of the code in the download folder for logged in users :

Step 1 : Upload the search.js file to the Enterprise Pro themes js folder.

Step 2 : Copy & paste the PHP code from the functions.php file to the end of the Enterprise Pro themes functions file.

Step 3 : Copy & Paste the CSS from the style.css file to the end of the Enterprise Pro themes style sheet and clear caching. This CSS may need tweaking for use in other Genesis child themes.

Register or login to access the download folder :

Register for full access

Enterprise Pro Theme Nav Menu Search

Reader Interactions

Comments

  1. Nguyet Vo says

    August 19, 2020 at 3:55 pm

    I followed these steps to add a secondary menu with search to the Oasis Pro theme. It looks fine but I got this error when I tried to actually do a search –

    local.dev refused to connect.

    I know Oasis Pro is a third party theme but I was hoping you might have some insight. Thanks.

    Log in to Reply
    • Brad Dalton says

      August 19, 2020 at 4:07 pm

      Change local.dev in the code to your domain example.com

      Log in to Reply
      • Nguyet Vo says

        August 19, 2020 at 4:29 pm

        That did fix the problem but is there a way I can write the code so that I’m not hard coding my domain name

        Log in to Reply
        • Brad Dalton says

          August 19, 2020 at 5:11 pm

          You can add the search form using other methods like this :

          ob_start();
          get_search_form();
          $search = ob_get_clean();
          $menu  .= '<li class="right search">' . $search . '</li>';

          And then add the icon using CSS.

          Or use :

          site_url();
          Log in to Reply
  2. Cemal Ekin says

    March 26, 2019 at 8:07 am

    Will this work for other, third-party themes like Studio Pro if I substitute Studio Pro for Enterprise in the above instructions?

    Cemal

    Log in to Reply
    • Brad Dalton says

      March 26, 2019 at 4:31 pm

      Should do however based on my experience, your theme is coded differently.

      Log in to Reply
      • Cemal Ekin says

        March 26, 2019 at 5:35 pm

        Thank you, Brad. I will try it on my testbed.biz staging site and when I do that I will let you know how it worked.

        Cemal

        Log in to Reply
        • Brad Dalton says

          March 26, 2019 at 5:37 pm

          It’s not written for that theme nor do i support that theme.

          Log in to Reply
        • Cemal Ekin says

          March 26, 2019 at 5:59 pm

          You are correct, Brad. That child theme is structured differently. In the functions.php file, the lines to be removed are not there. In fact, it looks a good deal different from other such files I edited on occasion.

          No problem, I put the search in the footer area for the time being. I have a feeling this theme will not stay too long on the site.

          Thank you for your help,

          Cemal

          Log in to Reply
          • Brad Dalton says

            March 26, 2019 at 7:09 pm

            Happy to help with any StudioPress child themes.

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.