[Support request] Search icon in navigation menu on mobile device is un-clickable

[Jonny]

The search icon in my navigation menu on mobile devices is un-clickable.

It is working on desktop but not on mobile.

Also, I have enabled Mediavine’s Site Search Integration with my native Search Box and I would like to integrate this feature with the Search Icon as well. How can I do this?

[Jonny]

In addition to above, I have just enabled Navigation Search Modal and am having issues. When clicking on the search icon on mobile and on desktop, it jumps to the bottom of the page to a search box. It doesn’t open as a fully-accessible modal.

[Fernando]

Hi Jonny,

Can you try #1 here to debug: https://docs.generatepress.com/article/debugging-tips/

It’s recommended to backup your site before proceeding with this.

[Jonny]

Instead of the search modal, how can I activate Mediavine’s Site Search Integration to appear when a user clicks on the search icon

[Fernando]

Does Mediavine have a shortcode for its search? Or, does it have a code it requires to be injected?

[Jonny]

In mediavine dashboard they just have a toggle button to enable or disable the Site Search Integration. I have it enabled but it only works for my Search Box and not Search Icon.

[Fernando]

I’m not sure how this integrates into our Search feature.

This would be out of our scope of support. Usually, there’s a Shortcode or code that needs to be injected for a Search plugin to work.

Can you ask Mediavine support how it can be implemented to a theme like GeneratePress?

[Jonny]

Hi Fernando,

I found this article from Mediavine regarding the search integration: https://help.grow.me/hc/en-us/articles/4771746806939-Search-Selector

It suggests using an ID selector of #search-button for Mediavine’s Site Search Integration to be triggered.

How can I add this to the Search Icon in my navigation menu to override the Search Modal from generate press.

EDIT: Or perhaps is there a way to have a dedicated search icon in my navigation menu that opens Mediavine’s Grow Me Search feature.

[Fernando]

The article just indicates the need for an arbitrary selector. It’s not necessarily #search-button.

You can hook a Button with a search icon through a Block Element – Hook. Hook it to menu_bar_items.

Reference: https://docs.generateblocks.com/article/icon-overview/

I believe the logic would be Mediavine just need a class or id selector to be indicated somewhere in their plugin for it to work. You’ll need to find out how.

[Jonny]

I was able to add the search selector in my Mediavine (Grow Me) dashboard and it has triggered Mediavine’s Site Search Integration which is good.

However, since enabling Navigation Search Modal from GP, I have noticed a search box has been added below my footer. Is it possible to remove this search box?

And there is still an issue when clicking on the search icon in the navigation menu, Mediavine’s Site Search Integration opens but at the same time, it quickly jumps to this search box at the bottom of the page. Mediavine’s Site Search Integration opens, but when you exit this Site Search Integration page, you’ll now be at the bottom of the page in this search box.

Hope that makes sense and can advise on how to fix this.

[Fernando]

Is it triggering upon clicking the GP modal search button?

How exactly was the process to enable the Mediavine Search functionality? Did you input any selector as mentioned in the article you previously shared?

[Jonny]

Hi Fernando,

Yes correct it is triggering when clicking GP modal search button. However, since enabling the GP modal search button, it has inserted a search box below the footer on my site. Is it possible to remove this search box?

I added the selector .gp-icon.icon-search in the Grow.Me dashboard to trigger the Site Search Integration by Grow.Me

[Fernando]

Disable the Search modal.

Create a Block Element – Hook. Hook it to menu_bar_items.

Add a GB Button Block with a Search Icon.

Then give it a class custom-search-mediavine. Adding Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

Use this class instead on the Grow.Me dashboard.

[Jonny]

im stuck on adding a search icon in a button block, where can i find this?

[Fernando]

It’s in the Block Settings. Reference: https://docs.generateblocks.com/article/icon-overview/

You can try adding this SVG from Bootstrap:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>

[Author]

Posts