Hi Rob,
It happens because the menu script creates a DOM copy of the search element, instead of showing the same one as on the desctop version. This is a very bad developer practice, as it essentially clones the original search bar, in this case creating invalid HTML output, as elements with the same ID will be present on the page multiple times. Cloning does not copy the event handlers either – that is why the copied search instance does not work.
Some menu solutions do this, as they are designed to hold simple non-script powered elements, like a simple search form, links, images etc.. However in this case, there is a difference, as this search bar requires scripts to control it’s functionality – handling the live search requests, clicks on settings/magnifier buttons and many other different events. The plugin tries to correct this issue, however the duplicate element IDs prevent the script from initializing correctly.
In these very rare cases I usually recommend either moving the search bar to a different position, or using a different menu solution, that uses custom CSS instead of cloning by script to move it’s elements.
I have made a custom script that might be able to get around this issue, but please keep in mind that this is a very nasty solution, and may not work in all cases. Add this custom code to the functions.php in your theme/child theme directory (copy from line 3 only!). Before editing, please make sure to have a full site back-up just in case!
Best,Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
