Add a Search Form to the Main Menu

This short tutorial will tell you how to add a search form to your Sydney site — and put it to the main menu.

Add this PHP code to child theme’s functions or use a functionality plugin like Code Snippets:

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



Then add this CSS code Additional CSS under theme customizer (Appearance > Customize) or use child theme’s stylesheets:

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


Add the below jQuery code with TC Custom JavaScript plugin:


    "use strict";

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


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

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

        if (!$ && $searchArea.has( === 0){




Leave a Reply

Your email address will not be published. Required fields are marked *