Searchbar in menu ?

Hi

You can do this by working a little with codes in the theme’s functions.php file and adding some style in the style.css

Add the below codes in the respective files and it will work for you. But I will suggest you to make the changes in a child theme, so as to preserve these changes even after updates.

In the functions.php file add the below code.

function add_search_box_to_menu( $items, $args ) {
	if ( $args->theme_location == 'main' )
		return $items . get_search_form();

	return $items;
}
add_filter( 'wp_nav_menu_items', 'add_search_box_to_menu', 10, 2 );

The above adds search form to the main menu. I assume you have a menu selected in Appearance >> menus >> manage location

Now add the below styles to the child theme’s style.css

#main-navigation .search-form {
    display: inline-flex;
    position: absolute;
    right: 40%;
}
#main-navigation .search-field {
	margin: 8px 0 20px;
}
#main-navigation .search-submit {
	margin: 0 0 20px 10px;
}

The above style worked for me, please adjust the position of the search form as per you menu items.

Hope it helps!
Thanks

nice thankyou!

you are welcome.

hmmmi just tried it yesterday, it is just mooving the searchbar to the topheader and not in the menu ? is it possible to import the search button from the hueman theme to hiero ?

Hi

yes the above code adds a search bar to the top navigation menu, but using the different conditionals you can add it to any navigation menu.

can you please elaborate more on “importing search button from hueman theme”?

Thanks

yes of course ?? if you look at this site https://ubuntuportal.com/
it is running on the hueman theme and have an intergrated search button with a popup in the main menu line.

I checked the link, the theme doesnt provide that. I guess the user has customised it.

Its a combination of css and js.

I will check if I can provide you a small script for this.

Thanks