[Support request] Remove Search Box Styling

[Jim]

I added a new search system to my site that opens a search pop-up on the screen when someone clicks the search icon in the menu. However, after returning to the main page, the search box is still there covering the menu as normal. Is there a way to keep the clickable function of the search box (but where to search box and “x” to close it either don’t pop up or disappear automatically after a few seconds?

Thanks.

[Ying]

Hi Jim,

Can you link us to the site where we can see the issue?

[Jim]

UncoveringNewYork.com – Click the search box and then, after the pop-up comes up, close it without doing a search, and you’ll see the search bar is still there.

[Ying]

Eh.. I’m not seeing the issue:
https://www.screencast.com/t/Z220yPnGf

Let me know if I miss anything!

[Jim]

Do you have a pop-up blocker of some kind, maybe? When I click the search icon in an incognito browser, the pop-up works as expected.

[Ying]

Oh yes, I have ads block.

I can see the issue now, but it’s very complicated to modify the JavaScript which is out of the scope of the support froum.

I would recommend do not use GP’s navigation search at all.

Does the plugin offer a specific search button? Or can it be triggered by a button with certain CSS class?

Let me know!

[Jim]

I can set it to trigger on anything. I had thought about replacing the GP search with just a magnifying glass icon, but I wasn’t sure how to ensure that 1) an image would show up in the menu bar and 2) that it would properly size with the menu bar for different size windows.

Any thoughts on how to get around all that?

[Ying]

If you have GenerateBlocks plugin, you can add a button block with the icon to a block element - hook, choose menu_bar_item as the hook name, and setentire site as the location.
https://docs.generatepress.com/article/block-element-hook/

[Jim]

I’ll look into that. Thanks so much.

[Ying]

No problem 🙂

[Author]

Posts