Add magnifying glass icon to mobile menu top tab

Hi @lipstickalchemist,

Thank you for your question.

As it is part of menu therefore it will only display when the menu is displayed so if you want it to always display then you have to remove it from menu.

You have to develop custom code to achieve this as currently the plugin doesn’t support this functionality but yes i will do consider this as a feature request to be implemented in the future version of plugin.

Best regards,
Vinod Dalvi

Hello @vinod-dalvi!

I think that is a great functionality and adding that would definitely increase the value of your nifty plugin! Generally most themes do not provide the sliding search feature by default and this plugin can come in handy then, especially on cell phones.

Do let me know if you develop it further as I am on the lookout for a good, light plugin that adds a sliding search functionality when magnifying icon is clicked, in the top tab of the mobile view of my site.

Thank you!

Sure i will develop it and let you know here.

That’s very kind of you. Looking forward to it ??

In the latest plugin version i have added functionality to display search form outside the menu on mobile devices. You can enable this functionality by selecting plugin option “Display Search Form in Header on Mobile Devices” in plugin settings.

After enabling this option the search form displays in header outside menu on mobile devices but it may not display in appropriate place depending on the theme that you use so you have to develop custom CSS code to style it correctly and use that custom CSS code by adding it in the Custom CSS option in plugin settings.

Thank you very much for the support and this awesome new feature! It look and works great. I’ve asked my theme for help regarding the positioning but I have another, more pressing issue.

When I activate the “Display Search Form in Header on Mobile Devices” option, my hamburger menu is no longer clickable. It doesn’t respond at all. When I deselect the above option the hamburger menu goes back to normal but when it’s active, the hamburger menu is non-functional.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

My site is https://lipstickalchemist.com/

I noticed, after a lot of repeated clicking, that the menu only opens if I click the bottom left extreme of the hamburger only. Everywhere else it’s insensitive like there is an invisible layer over it and blocking it.

Also, regarding the position, my theme support said that it doesn’t show up on their device for some reason. It does on mine though, and I’ve sent them a screenshot.

It also doesn’t show for me on mobile device.

Please make sure you have selected plugin option “Display Search Form in Header on Mobile Devices” and also clear the cache you are using on your site.

It’s activated and I’ve cleared the cache. There’s no option to upload screenshot here, but you can see the image I’ve uploaded on the forum that shows the icon.

Here’s what i am getting https://imgur.com/a/IisrD

Seems we have reached an impasse. What do I do? I was wondering if you could give me CSS to change position using your demo site, so I can alter the position values on my site and see if it shows up then.

Also I’ve noticed it’s showing up on my phone through default browser, Facebook and Instagram but not on chrome or edge. Maybe there’s a bug? I don’t know, kindly assist!

I’m still waiting for a resolution for this but somehow it has been marked resolved. It isn’t fixed yet, please help.

After deep testing and troubleshooting i found out the issue.

To detect whether the site is accessed on mobile or desktop i used WordPress wp_is_mobile function but this function does not work well with caching.

You can test it by temporary disabling cache on your site.

I’m terribly sorry for the trouble!

Unfortunately , I don’t know what that means or how it works, so could you please tell me what I have to do to get the button displaying and functioning right?