How to add search to site's main menu?

image

Hello there,

Try this solution:

Regards,
Kharis

Thank you, dear Kharis

But it does not work for me. Do you have some other solution (plugin, another code)?

Hello there,

Please share a link to your site here, probably there’s something I can check where the error is from.

If your site has an active cache, you should flush/clear it. Otherwise the web browser will only load older version of your site. https://wordpress.org/support/article/i-make-changes-and-nothing-happens/

Regards,
Kharis

Dear Kharis,
image

image

Could you please make some changes in the codes? I am sending you the screenshots of errors.

Hello there,

Remove the custom code you added in there as that’s for CSS. Try the below steps:

  1. Add the below snippet with a Functionality or Code Snippets plugin.
    /*
     * Add a search form to menu navigation
     */
    add_filter('wp_nav_menu_items', 'sydney_child_add_serch_from_to_nav', 10, 2);
    function sydney_child_add_serch_from_to_nav($items, $args){

      if ($args->theme_location == 'primary') {
          $items .= '<li class="top-search-menu">'.get_search_form(false).'</li>';
      }
      return $items;

    }
  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

        "use strict";

        var $searchArea = $('.top-search-menu');

        $searchArea.click(function(){
          $(this).addClass('input-expanded');
        });

        $(document).mouseup(function (e){

            var container = $(".top-search-menu");

            if (!$searchArea.is(e.target) && $searchArea.has(e.target).length === 0){
              $searchArea.removeClass('input-expanded');
            }

        });

    })(jQuery);
  1. Update
  2. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .top-search-menu .search-submit{
      display: none;
    }

    .top-search-menu label{
      position: relative;
    }

    .top-search-menu label:before{
      font-family: FontAwesome;
      content: '\f002';
      display: inline-block;
      display: block;
      width: 26px;
      height: 26px;
      position: absolute;
      top: 0;
      left: 0;
      padding: 0 5px;
    }

    .top-search-menu .search-field{
      height: 26px;
      padding: 3px 5px 3px 23px;
      font-weight: normal;
    }

    .top-search-menu label:before{
     color: #fff;
    }

    .top-search-menu.input-expanded label:before{
     color: #333;
    }

    .top-search-menu input{
      opacity: 0;
      width: 0;
    }

    .top-search-menu.input-expanded input{
      opacity: 1;
      width: 140px;
    }

Regards,
Kharis

Hello, Kharis.

Thank you so much for support!

I have just followed all steps and noticed that:

  1. Before I entered the CSS code such page appeared

Yesterday. I have tried the “Ivory” plugin. And similar page was generated and search icon appeared in the main menu.
I had an issue: I do not know how to change the design of “Search page”?

  1. The CSS code, sent by you, does not have some effect. There is no “Search” icon in the main menu.

Could you please help me?

If you need password for dashboard access, just tell me.

Regards, Naira

Did you visit this page?

https://dev.yourtourinfo.com/?s=hide-title

This is a search result page that displays no result as “hide title” term doesn’t match with any entries found in your site. There’s nothing to do with the steps I mentioned.

The search icon should be visible if all steps are correctly applied. Please take a mind refresh. And redo all the steps another time with no rush.

Regards,
Kharis

Hello Kharis,

I have found another solution.
In any case thank you very much for your help.

Regards, Naira

Great!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

I’ve tried the steps listed in the Search in the Top Menu thread you posted as the initial reply and I can get a search box in the main menu, but it’s centered underneath my menu items (not to the right of them) and it’s not the icon with expandable search box that I’d like to have. Any ideas what I’m missing?

After refreshing the cache several times, the box is now to the right of the menu, but it’s not expandable. The magnifying glass icon appears in the search box but the box is always present.