WP SITES

Log in

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

—

by

Brad Dalton

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.

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

Comments

10 responses to “Drop Down Search Toggle in Header Nav Menu With Magnifying Glass Icon”

  1. Nguyet Vo Avatar
    Nguyet Vo

    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.

    1. Brad Dalton Avatar
      Brad Dalton

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

      1. Nguyet Vo Avatar
        Nguyet Vo

        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

        1. Brad Dalton Avatar
          Brad Dalton

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

          [code]
          ob_start();
          get_search_form();
          $search = ob_get_clean();
          $menu .= ‘

        2. ‘ . $search . ‘

          3. ‘;
          [/code]

          And then add the icon using CSS.

          Or use :

          [code]
          site_url();
          [/code]

  • Cemal Ekin Avatar
    Cemal Ekin

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

    Cemal

    1. Brad Dalton Avatar
      Brad Dalton

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

      1. Cemal Ekin Avatar
        Cemal Ekin

        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

        1. Brad Dalton Avatar
          Brad Dalton

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

        2. Cemal Ekin Avatar
          Cemal Ekin

          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

          1. Brad Dalton Avatar
            Brad Dalton

            Happy to help with any StudioPress child themes.

    • Leave a Reply

    Join 5000+ Followers

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