Do you want to add a search bar to your WordPress navigation menu? Search form can be really helpful for your users to find what they’re looking for on your site. In this article, we will show you how to add a search bar to your WordPress menu.
Why You Should Add a Search Bar in Menu?
A search bar makes it easy for your users to find what they’re looking for without scrolling to all the pages.
If you add a search bar to your top navigation menu, then it will appear on all pages that display the menu, and your users can easily search all the content on your site.
There are multiple search plugins that you can use to add a search bar to your site. Let’s take a look on how to add a search bar to your WordPress menu.
Adding a Search Bar to WordPress Menu
First thing you need to do is to install and activate the Add Search to Menu plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, you need to go to Settings » Add Search To Menu page in your WordPress admin area to configure search bar to your menu.
On this page, you need to select the menu where you want to add the search bar. This list of menus (Primary Menu and Social Links Menu) belongs to your WordPress template. If you change the template of your site, then the list will be automatically updated with the available menus from your template.
Once selected, the search bar will be added to your navigation menu. You can define the search post types, search form style, search menu title, manage mobile display for search, and more. These settings will also help in controlling the search results for your users.
After that, you can head over to your site to see the search bar in the WordPress navigation menu.
You can also add the search bar to all other menus of your site. Simply select the menu from plugin settings where you want to display your search form.
We hope this article helped you learn how to add a search bar to WordPress menu. You may also want to see our expert pick of the useful tips and tricks to speed up WordPress site performance and search results.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
unfortunately, it doesn’t display correctly as it mess up with the nav menu. I’ve tried different plugins and all of those are the same. For newbie, seems like no other way but asking to the theme developer or professional help to code it manually.
No, You don’t need to become developer or professional to make small custom CSS.