How To Add Class To Style Search Box

The tutorial shows you how to add a class and style it.

add_filter( 'wp_nav_menu_items','add_search_box', 10, 2 );
function add_search_box( $items, $args ) {
$items .= '<li class="your-class">' . get_search_form( 'echo=0' ) . '</li>';
return $items;
}

For CSS questions, please ask on Stackoverflow.

But the code doesn’t enable you to select between the primary or secondary nav menus unless you extend it like this.

add_filter( 'wp_nav_menu_items','wpsites_add_search_box', 10, 2 );
function wpsites_add_search_box( $items, $args ) {

if ( 'primary' != $args->theme_location )
return $items;

$items .= '<nav class="your-class">' . get_search_form( 'echo=0' ) . '</nav>';
return $items;
}

Written about this topic several times and i know you would want to use the same class as your themes nav menu if you want to style it the same.