[Resolved] Navigation Search Bar

[Mike Tolliver]

Hi Tom,

At some point when adjusting my website, I put the site search function inside the primary navigation bar, justified to the far right.

Following this guide:
http://generatepress.com/forums/topic/social-networks-buttons-on-nav-menu-bar/
I managed to put the social icons into the nav bar and justified them right using the ‘!important’ command in the css (couldnt get it to work otherwise).

Now the social icons are all the way to the right with the search icon immediately to the left of those. I would prefer the search icon on the far right, but I cant even find the setting I originally did to place the search bar in the primary nav in the first place. I feel like I am taking crazy pills. Any suggestions?

[Tom]

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!

[Mike Tolliver]

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!

[Tom]

You’re welcome! 🙂

[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! 🙂

[Mike Tolliver]

Worked like a charm!

[Tom]

Awesome! 🙂

[Joseph]

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

[Tom]

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;
}

[Joseph]

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

[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;
}

[Graham Leatherbarrow]

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.

[Tom]

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

Let me know 🙂

[Graham Leatherbarrow]

Sorry Tom, typing error:

http://www.isleofskyebedandbreakfast.com

[Tom]

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;
}

[Author]

Posts