How to Add Search in the Menu Bar of WordPress

A search function can help visitors find exactly what they’re looking for on the website. This is especially useful if you have a lot of content available. While the system has a default ability built-in, what if you want to add search to the menu bar of WordPress?

For example, what if your theme doesn’t use a sidebar? Perhaps you want to move the search field to streamline the site’s layout.

Something else to consider is how your site appears on mobile devices. As most themes shift the sidebar down, visitors using smartphones may not even see a search widget for the website.

Adding it to the top nav menu makes search easier to find for mobile users.

In this tutorial, I’ll show you how to add search to the menu bar in WordPress. This also helps if you want to create a custom nav menu on the website.

Using the Ivory Search Plugin

Today, I’m going to show you a bit of the Ivory Search plugin. It’s an easy tool to use and comes with a variety of options.

For instance, you can quickly create a WordPress search widget for the sidebar as well as add it to the navigation menu. It also supports WooCommerce for those who want to build an online store.

Install and activate the “Ivory Search” plugin.

Ivory Search

Upon activation, you’ll see an update notification appear. This is a security feature that is purely optional. You can choose to allow or skip the notifications.

Allow Notifications

For this tutorial, I’m going to click “Skip” to continue. Because the plugin is added to a temporary site, I really don’t need to worry too much about opting into this feature.

Once you choose the notification option, you’ll be taken to the Ivory Search form screen. By default, the plugin will create a basic form for you.

It is here where you can copy the shortcode of the search field and paste it into any post or page if you’d like.

For now, we’re using Ivory Search to add to a menu.

Click the link for “Settings” under the Ivory Search tool on the left admin screen of WordPress.

Ivory Search Settings

The plugin will find the menus you have active on your website. Click the switch to activate the menu search bar under “Select Menu.”

Activate Search

From here, you can also change some of the options for the search field such as form style, menu title, classes and activating the closing icon for search. These are optional depending on how you want the field to operate.

When you’re done with adjustments, click the “Save” button on the bottom.

Save Search Settings

You now have a search field in your menu bar.

Search Menu Nav Bar

NOTE: If you have a search widget for the Website, you might want to remove the feature. It may seem redundant to your visitors if there are two search fields close together on the site.

Two Search Fields

There’s nothing wrong with having multiple search bars available. But it’s probably more aesthetically pleasing to simply have the one.

Other Plugins to Try

While this tool is an easy way to add search to a menu in WordPress, the plugin isn’t the only one available. In fact, there are several that you might want to consider if you’re looking for different options.

Here are just a couple of the ones I found that might be of help.

Max Mega Menu

Max Mega Menu

Max Mega Menu has a lot of customizable options available especially if you buy the pro version of the plugin. While it’s more of an editing system for menus, it does come with the ability to add a search box.

It’s an exceptionally popular tool and has a lot of elements for creating custom menus in WordPress.

WP Mega Menu

WP Mega Menu

WP Mega Menu is another plugin that is more focused on customizing a nav bar. However, it also supports adding searching in the menu as well as a lot of other features.

This tool has several customizable features and supports mobile devices, Google Fonts, and various social icons. It’s a great way to add more to the nav menu aside from your search field.

Making Search Easier on Guests

Although a search widget for the website in the sidebar is helpful, adding it to your menu makes it easier for visitors regardless of the device they use. From aesthetics to functionality, consider the possibilities with a search nav menu item.

What kinds of pages, links or features do you use on your navigation menu? Do you find custom search options to be a valuable asset to your site?

Author: Michael Brockbank

Michael has been in the tech industry in some form or another since the late 1990s. He’s built a variety of websites using HTML, Joomla and WordPress. Starting his freelance writing career in 2012, he’s completed thousands of projects world-wide covering a wide scope of topics. Michael is currently the Content Marketing Team Lead. Today, he manages a team of writers to create tutorials, blog posts and support content for customers. Outside of GreenGeeks, he manages a YouTube channel that helps others learn how to become freelance writers, bloggers and overall professionals.

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.