Reply To: Navigation Search Bar

[Tom]

Found a solution. This will allow you to place the search icon wherever you like in your navigation.

1. Add this CSS:

.main-navigation .search-item {
	display: none;
}

.main-navigation .search-item.custom {
	display: block;
}

First block will hide the default search button.

Second block will show our soon to be added menu item.

2. Go to “Appearance > Menus”. At the top right, click “Screen Options” and make sure the “CSS Classes” checkbox is checked.

On the left, open the “Custom Links” module.

For the URL, add: #

For the Link text, add: <i class="fa fa-search"></i>

For the CSS class, add: search-item custom

3. Add the menu item to your menu, and place it wherever you like.

This hasn’t been tested as a sub-menu item, and it probably won’t work as one, so definitely keep it as a top level menu item.

Hope this helps! 🙂