[Resolved] Icons and search box in the navigation bar

[Bernhard]

Hello there,
I integrated icomoon and dashicons in the navbar. I hav actually
1. dashicon “home” on mobile only
2. dashicon “facebook” as last item of the menu
3. Then I have an icomoon icon for airports, using the navigation label
<span class="icon-aircraft-landing"></span> Airports

I tried to insert more icons, eg. for food
<span class="icon-location-food"></span> Food

but only the first icomoon icon is shown. If I add more code, like food or whatever, the icons are no more shown.
Can you please help to solve this?

The second thing is, I would like to add a search box to the mobile navigation only and to place it somewhere in the middle between the logo (on the left) and the hamburger menu (on the right). For desktop view, I have integrated a search widget in the sidebar.

Thank you for your help.

[David]

Hi there,

1. have you checked that those classes eg. icon-location-food exist in the icomoon library?

2. Why not use the Navigation Search option in Customizer > Layout > Primary Navigation ? We can provide some CSS to hide it on desktop.

[Bernhard]

Hi David,
1. yes
2. please let me have the CSS

Thank you

[David]

1. I can’t see the other icon html in the menus – can you add one so i can take a look why its not displaying?

2. This CSS should remove it from desktop only:

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

[Bernhard]

1. Now it is there. It seems to need some time to update.

2. The CSS works 🙂 Is it possible to define a different background (white) and text color (black) for the search box?

[David]

1. awesome 🙂

2. Leo provides some CSS to do that here:

https://generatepress.com/forums/topic/navigation-search-colors/#post-1040744

We just added this as an option to GPP 1.9 – which is in Alpha release at the moment.

[Bernhard]

Hi David,
(2) this code is not what I need. I need to change the background color of the search field in all conditions. I think, I’ll wait for the new release.
Thank you for your help.

[David]

GPP 1.9 update only includes the changes to the Navigation Search, what other ‘conditions’ do you require?

[Bernhard]

Hi David,
Leo’s CSS does change the color only on mouse click (or whatever) but on mobile this is not the case.

I need simply to define the background color and the text color when the search field is open.
It seems that actually the color values come from Customizing->Colors->Primary navigation->Background hover and ->text hover and I would need to define the colors for search field->background and ->text.

[Tom]

Hi there,

Have you tried our alpha versions?:
https://generatepress.com/gp-premium-1-9-0/
https://generatepress.com/generatepress-2-4-0/

That way you can just use the Customizer options 🙂

[Bernhard]

Hi,
I have updated GPP to 1.9 but I don’t find the color setting for the search bar. Is it necessary to update also the theme?

[Tom]

Yes, you need to install GP 2.4.0 as well 🙂

[Bernhard]

Yes, that’s what I was looking for 🙂
Thank you

[Tom]

No problem! 🙂

[Author]

Posts