Search icon in menu

Hello there,

In order to achieve that objective, could you please try to do the following?

1. Insert the following function into the child theme’s functions.php file

add_filter( 'wp_nav_menu_items', 'sydney_child_add_top_search_menu', 10, 2 );
function sydney_child_add_top_search_menu( $items, $args ) {
    if ($args->theme_location == 'primary') {
        $items .= '<li class="top-search-menu">'.get_search_form(false).'</li>';
    }
    return $items;
}

2. Apply the following CSS code into the child theme’s style.css

.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;
}

Thank you!
It worked!

Minor detail: Is it possible for the search box/field not to be white? I want the slider to show until you actually click in the field.

Thor

Hello there,

To accomplish that objective, try to do the following:

1. Install and activate the Header and Footer Scripts plugin
2. Go To Settings > Header and Footer Scripts panel
3. Paste the following code into the provided Scripts in footer box

<script>

(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);

</script>

4. Save settings

5. Apply the following CSS code:

.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;
}

Let me know how it goes.

Regards,
Kharis

Thank you.

I pasted your code in the header section (not the footer…) of the plugin, and pasted the css in the custom.css of my child theme.

It looks good – the magnifying glass is there – transparent background and white magnifying glass.

Only problem – there is no way I can write my search in – when I hover the mouse over nothing happens – no input field.

Thank you again,
Thor

Hello Thor,

Try to change the jQuery code I previously suggested with the following:

<script>

(function($){

    "use strict";

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

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

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

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

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

    });

})(jQuery);

</script>

Let me know how it goes.

Regards,
Kharis

Thank you.

Still behaves like before.
Additional info:
– The mouse pointer changes to a cursor
– the “search for” message displays (upon hovering)
– text input not possible

Thank you anyway,
Thor

> text input not possible

Try to open your URL in other browser(s).

Chrome, Firefox, Safari – all the same – text input not possible.
https://www.soundpainters.org/heme/

Hello there,

Thank you for the link.

I noticed that you inserted the code in the header. Try to insert it in the “Scripts in footer” box as I mentioned previously.

Let me know how it goes.

Regards,
Kharis

Hi.
This did the trick!

My fault; I thought that it must be a mistake to place the code in the footers section when we tried to fix the header…

Thank you so much – it looks very elegant ??

Great! Glad to know that.

Hi Kharis,

I tried adding this search bar within my website and I went in the css of styles.php and pasted the code you provided at the bottom and once I updated it gave me an error message.
Parse error: syntax error, unexpected ‘.’ in /home1/carlblanchet/public_html/wp-content/themes/sydney/inc/styles.php on line 192

So I went back and removed the code i had added but it still provided the same message and now I can’t even access that page anymore all i get is that message.

What should I do to retrieve my site?

Thanks,
Carl

Dear Carl,

I am sorry to hear the trouble you are currently having.

Please log into your FTP account or your site’s File Manager through cPanel. Navigate to wp-content > themes > delete the “sydney” folder. Then log into your site’s dashboard. Install and activate the fresh one of Sydney theme.

Please don’t touch the styles.php file and other theme’s core files. Custom CSS code must be applied through the Simple Custom CSS plugin or child theme’s style.css. You can download Sydney child theme here at our site.

Regards,
Kharis

Hi Kharis,

Thank you for you quick reply.
That’s where I went wrong.. I had to paste in style.css and not styles.php. I sure learned my lesson.

Thanks for your help!

Sincerely,
Carl