Search box

Hello there,

Firstly add this PHP snippet to your child theme’s functions. Or use a plugin that allows the same purpose like Functionality.

add_filter( 'wp_nav_menu_items', 'astrid_child_add_top_search_menu', 10, 2 );
function astrid_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;
}

Then add the below 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: -4px;
  left: 0;
  padding: 0 5px;
}

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

Regards,
Kharis