Navigation Search Bar

Ha, I'm actually working on this right now - check out our demo and you'll see the same problem (http://generatepress.com/demo). I want the search on the far right as well.

I'll figure out a solution and will post it here :)

The option to place the search icon in the navigation can be found in "Appearance > Customize > Layout" - it's the "Navigation Search" option.

Thanks!

Awesome! Thanks for the speeding support and direction. I would have no hope of being able to build my own website without tools like GP and customer support like yours. Thanks again!

You're welcome! :)

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! :)

Worked like a charm!

Awesome! :)

I followed your css and menu setup and it worked great with the exception of two issues.

1) The default search icon still displays although the css is saying not to.

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

2) I increased the size of the icon to match the social media to
<i class="fa fa-search fa-2x"></i> and that worked perfectly but after I do a search and click on the "x" to close the search bar, the search icon goes back to original size (smaller)

Everything is set just as mentioned above and the css is in the GP child theme.

You can see what I am talking about here:
(http://provinciawebdesign.com/disruptup/?page_id=46)

Thanking you in advance!!!

1. Ah - try adding !important to it - the navigation floating to the right is overwriting it:

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

2. This is because the JS replaces the code between the X and search icon, and it doesn't know to add 2x to it. Instead, try this:

.main-navigation .search-item.custom i {
      font-size: 2em;
}

Adding the !Important knocked both of the search icons off. I do have the Navigational Search enabled and I removed the fa-2x from the menu to <i class="fa fa-search"></i>

So in the Child Theme this is what I have.

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

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

.main-navigation .search-item .custom i {
font-size: 2em;
}

Don't know why it is hiding both icons.

Thanks Tom!!

!important is pretty strong - my mistake.

You'll have to also add it to the custom icon:

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

Followed your instructions and at the moment I get 2 icons on the nav menu. When clicked both seem to fade the the bottom line of nave menu.

htpp://www.isleofskybedandbreakfast.com

Thanks in advanced.

Graham.

Your website doesn't seem to be loading for me.

Let me know :)

Sorry Tom, typing error:

http://www.isleofskyebedandbreakfast.com

If you're using the float right navigation position, this is the CSS you should use:

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

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