Search in the Top menü

Hello

is there a possibillity to but the Search in the top menü?
www.dive-log.li

i have found on the Forum this Code:

/* BEGIN */

add_filter(‘wp_nav_menu_items’,’search_box_function’, 10, 2);
function search_box_function( $nav, $args ) {
if( $args->theme_location == ‘primary’ )
return $nav.”<li class=’menu-header-search’><form action=’http://www.dive-log.li/’ id=’searchform’ method=’get’><input type=’text’ name=’s’ id=’s’ placeholder=’Pesquisar…’></form>“;

return $nav;
}

/* END */

But if i put this in the child Theme funktion.php i have this error:

 Parse error: syntax error, unexpected 'class' (T_CLASS) in 
/home/thechose/www/dive-log.li/wordpress/wp-content/themes/sydney-child/functions.php on line 7

Is there any error in the code for this Theme?

Thanks

Hello there,

Thank you for getting in touch here.

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

  1. Paste this code in the most bottom line of child theme’s functions.php file

/*
 * 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;

}

If you haven’t been running a child theme yet, you would need to download the Sydney child theme here. Unzip, then open the style.css file, replace Template: sydney to Template: sydney-pro-ii.

  1. Paste this code in the child theme’s style.css file


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


  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>


  1. Save settings

Regards,
Kharis

HEllo again

Wow Thanks für this good Code and Solution.
Thats perfect and look whery good

Hi, I have followed the instructions but the search box not gets expand when click on the search icon. Can you please let me know what the issue is?
Website: http://copaceticmedia.net/sscv4

Dear Amal,

Could you confirm if you have edited the footer.php file? If so, find the following line:


</div><!-- #page --

then replace it with:


</div><!-- #page ->

Regards,
Kharis

This worked. Thank you for the help.
Cheers!

Thank God finally i found a section where i can ask my query.I am getting this message on my every single page- “)Oops!That page can’t be found”. What should i do? My website is http://www.ambikahotelmanali.com/

Hello there,

I visited one of your posts: http://www.ambikahotelmanali.com/2016/11/08/monastery/

It is displaying fine. Have you been able to resolve the trouble by yourself?

Regards,
Kharis

To Whom It May Concern:

Hi, Can I apply the instructions in this thread to a free version of Sydney theme? Thank you in advanced for your attention.

Kind Regards,

Ben

Hi,

Any update? Thanks for your attention in advance.

Regards,

Ben

Hello, I have been trying to add an expandable search box. I followed every step mentioned. Still the search box is not visible anywhere on the website. Can you please help? Am not a developer so need some hand holding.

http://krossconnect.net/passportperfect/

Thank you so much
Apatan

Hi @apatan,

It looks like you haven’t yet applied the PHP function as mentioned in here (step 1).

I noticed you haven’t yet running a child theme. You might need to use our premade child theme that can be downloaded from this link.

Regards,
Kharis

Hi Yonu,

How can I align the search box with my header menu. I also want the search bar and the button smaller in height than it is now.

Hello Fahim,

Please share the link to your site, so I can have a direct look and provide you with the exact code.

Regards,
Kharis

Hello Kharis,
I followed your instructions and would also like to align the search bar with the header menu but would like the search box and the button to be smaller to better match the menu. My site is http://tampaarts.org

Thank you,
Terri

Hello there,

Please try adding this extra custom CSS code and some adjustments as needed.


.top-search-menu .search-form {
  margin-top: -1px;
}

.top-search-menu label:before {
  font-size: 13px;  
  width: 20px;
  height: 20px;  
}  

.top-search-menu .search-field {
  height: 20px;  
} 

Regards,
Kharis

That shortens the height of the search box, however the button is still huge. Both are still centered under the navigation. Isn’t there a way to make it part of the navigation bar at the end of it?

I found this to shorten the height of the button. I do not know if it I need all of this css.
.text-white { color: #fff !important; }
.text-dark { color: #443f3f !important;}
button,
input[type=“button”],
input[type=“reset”],
input[type=“submit”] {
position: relative;
display: inline-block;
margin-top: 15px;
font-family: “Raleway”, sans-serif;
font-size: 13px;
line-height: 1px;
font-weight: 700;
padding: 10px 19px;
color: #fff;
text-transform: uppercase;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}

Also, I still do not know how to put it at the end of the navigation bar.

I persisted in looking for a solution and found a way to add a small magnifying glass icon in exactly the space I wanted it to be. I only needed one small bit of css to position it. I added this code to the functions.php
/*

  • 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).’’;
}
return $items;

}

I apologize for taking up your time but appreciate your help. I learned more by following your directions.

Have you resolved it? Let me know if you still need an assistance with this.

Regards,
Kharis