Cannot get the magnifier search icon visible on frontend

[kotisivutohtori59Participant]

Hi, I have tried to create Search Magnifier to this website: https://www.hyotykaluste.com/
But I cannot get it visible on the website. I understood that this should not require any coding. What am I doing wrong?

Do you have a demo-version I could import to the site? What I need is a search maginifier as you have rightside on this page:
https://ajaxsearchpro.com/

I tried to create one by using your documentation, but it does not come visible. What am I doing wrong?

You can find the version I’ve done here (called Mobile Icon):
https://www.hyotykaluste.com/wp-admin/admin.php?page=asp_settings&asp_sid=6#404

Please advise how I can get the mangifier icon type of search visible! Thank you!

– Anne

[Ernest MarcinkoKeymaster]

Hi Anne,

Thank you for the details. You had this option enabled, that hides the magnifier Icon. I have disabled that for you, if you clear your site and browser cache, the mafnifier should start appearing.

The compact search seems to be configured correctly. To make it visible, make sure to place it’s shortcode somewhere on the page:
[wpdreams_ajaxsearchpro id=6]
You can also use the widget, if that is better fo your case.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[kotisivutohtori59Participant]

Thanks! I missunderstood that settings.

I still have some white area on the right-side of the magnifier icon. I just wanted the icon to show up first and then after clicking the icon the Search-box to appear. Now there is the icon and some white area on right-side. How do I get the extra white-area to dissapear?

– Anne

[kotisivutohtori59Participant]

Pictures of what I mean!

Attachments:

You must be logged in to view attached files.

[kotisivutohtori59Participant]

The searchbox is now visible here:
https://www.hyotykaluste.com/tuotteet/

How can I get it visible only in mobile versions, not on desktop? Trying to find such a setting.

– Anne

[Ernest MarcinkoKeymaster]

Hi Anne,

You have this custom CSS in your theme style.css file:

div.asp_w.ajaxsearchpro{
	position: absolute;
	top:0px;
	min-width: 200px;
}

That is causing the conflict. Please either remove it, or modify it so that it does not affect the compact search, like so:

div.asp_w.ajaxsearchpro:not(.asp_compact){
	position: absolute;
	top:0px;
	min-width: 200px;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[kotisivutohtori59Participant]

Thanks will testi this out

– Anne

[kotisivutohtori59Participant]

Hi,

we managed to get the magnifier icon looking as it should! Thanks!

I still have one question thou…when clicking the search-icon and getting to the results page, I don’t see anymore the magnifier icon. So the visitor cannot do another search unless they go to another page. I tried to find from the settings how to enable the search-magnifier also on the results page, but cannot see any setting for that.

Can you please advise how to enable magnifier search icon also on the results page! Thanks!

– Anne

[Ernest MarcinkoKeymaster]

Hi Anne,

I just tried to check the results page, but I can see the magnifier Icon there: https://i.imgur.com/PGZhbgg.png
Make sure to clear your browser cache, that should resolve the issue.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[kotisivutohtori59Participant]

HI,
magnifier is only visible in mobile view here:
https://www.hyotykaluste.com/tuotteet/

See the image!
Your image is from desktop and there is a separate input box for desktop only. It does not fit to the mobile view so we have made a separate magnifier icon for mobile view only. But when using it and clicking for the results page, the magnifier is no longer visible.

– Anne

Attachments:

You must be logged in to view attached files.

[kotisivutohtori59Participant]

I found a way to edit the search results so that it will open live search, instead of a separate search results page. This will fix the issue, I think.

– Anne

[Author]

Posts