Bug or Styling Problem?

[onemillionplaces]

Hi,

I´m a Pro User of Search Pro since many years – and I never had any big problems. But now – after a redesign – I have 2 bugs and I hope you can help me.

I added a search box in the main menu of my page. But I have 2 problems with it.

When you hover over the search icon the “Search field” is displayed and you can enter a search term and the search results displayed via AJAX. But then the search box suddenly disappears and I can only see the search result list.

And when you scroll down to show more search results, the complete box move to the left corner and you can´t see the results. I have added a screenshot of the behaviour.

I hope this is just a little CSS to fix the problem? Can you please help me with this?

Michael

[Ernest Marcinko]

Hi,

I’m afraid this is not a plugin related issue. The search icon in the menu, and the container where the plugin is present is not controlled by the plugin, but the menu (I guess as part of the theme). When hovering over the search icon the container appears, but when looses mouse hover focus it closes – that is causing the issue.
I suggest checking if the menu/theme has an option to display the container only if the icon is clicked, or to never close it once it has been opened. Unfortunately I cannot suggest any custom CSS to resolve this, custom CSS cannot fix this, as it is a 3rd party script related issue.

[onemillionplaces]

Hi Ernest ,

thank you for your answer.

At the moment I have included AJAX Search Pro with this instruction: https://documentation.ajaxsearchpro.com/getting-started/search-as-menu-item

But with this I have the problems mentioned above.

Them I tried the following:
https://documentation.ajaxsearchpro.com/getting-started/replacing-the-default-theme-search-bar

But the X Theme is one of the 1% where this does not work 🙁

Then I tried to replaced it manually:
https://documentation.ajaxsearchpro.com/getting-started/placing-the-search-shortcode-in-theme-files

But I didn´t found a sollution to do that. I ask the X Support how to replace the Standard Search Bar:
https://theme.co/forum/t/styling-of-search-box/76371/5

But I´m not really sure what this mean. Is it impossible? Do you know the X theme? Am I the first user with X Theme and AJAX Search Pro plugin? 😉

Michael

[Ernest Marcinko]

Hi,

Well, in their responses they didn’t specify which file should be edited to replace the header search there. Looking at your site now, I’m seeing the search bar in the header, so I’m guessing you figured it out?

[onemillionplaces]

Yes, I moved the search field from the main menu to the header section.

[onemillionplaces]

Hi Ernest,

I hope you are doing well.

I have just a short question. PageSpeed Insights gives me an notice regarding to your plugin:

Ensure that text remains visible during web font loads.
Use the CSS font-display feature to keep text visible to users while web fonts are loading.
https://v7k3m3s6.rocketcdn.me/wp-content/plugins/ajax-search-pro/css/fonts/icons/icons2.woff2

How can I fix this?

[Ernest Marcinko]

Hi!

Make sure to update the plugin to the most recent release (4.21.8) and then clear all of your site cache. In one of the more recent releases a “font-display: swap” attribute was added to target this lighthouse suggestion.

[Author]

Posts