[Support request] Show only search icon in navigation

[Liran]

Hey there,

Is it possible to show only the search icon in the menu, without the search box or the close icon?

Here is an example

Thanks!

[David]

Hi there,

that particular site is using a 3rd party search service.

For a simple search modal, we have just added that to GP 3.3 which is in Alpha release:

https://generatepress.com/generatepress-3-3-0/

See here for screenshot:

https://generatepress.com/a-new-navigation-search/

[Liran]

Hey David,

I already use a 3rd party search service and I successfully followed their Site Search Integration instructions.

Now I just need a simple, static search icon that users can click on.

[David]

See my reply here:

https://generatepress.com/forums/topic/css-selector-for-search-icon-in-menu/#post-2463907

[Liran]

Thanks!

Any idea why the cursor doesn’t change to a hand pointer when I hover over the icon?

[David]

Because the clickable element isn’t a link – it will need some CSS to make it so.
Can i see your site with the icon in place? Then i can see what ID/Classes to style.

[Liran]

Hey David,

Here, have a look.

[David]

Try adding this CSS:

#grow-me-search {
    cursor: pointer;
}

[Liran]

Perfect 🙂

Appreciate the support.

[David]

You’re welcome

[Ravi Dixit]

Hey, David!

How can I follow this and add a search icon in my custom header creating using the Elements?

[David]

Hi there,

this topic was related to a 3rd party search option. What would your requirement be ?

[Ravi Dixit]

I am using GeneratePress and created by navigation bar using Block Element.

I just want to add a search icon at the right side in the Nav bar so users can search, that’s it!

[Fernando]

Hi Ravi,

You can try adding a WordPress Search Block to your Block Element.

Reference: https://wordpress.org/documentation/article/search-block/

[Ravi Dixit]

I already did, it is adding an entire search field along with the search icon

I only need a search icon.

[Author]

Posts