How to add search to site's main menu?


#1

image


#2

Hello there,

Try this solution:

Regards,
Kharis


#3

Thank you, dear Kharis

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


#4

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


#5

Dear Kharis,
image


#6

image


#7

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


#8

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


#9

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


#10

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


#11

Hello Kharis,

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

Regards, Naira


#12

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