Hi!
I will try to explain what is going on and why is it happening, it took me a while to figure it out.
So, at first sight it indeed looks like the two search forms are the same, but they are actually not. Turns out, the mobile menu has some weird solution to actually clone the DOM Node of certain parts of the menu to itself. This is not an issue, until you want to put something (interactive elements) that has javascript functions and handlers attached to it – like ajax search pro plugin, or anything else using javascript actions.
The javascript cloning process makes an exact duplicate of an element, but it cannot duplicate the javascript actions/event handlers with it, it’s virtually impossible to do so. The plugin has a fail-safe to initialize itself if the shortcode is used more than one time, and it works, however in this case there is a huge difference – the plugin is not duplicated via shortcode, but the nodes have duplicate IDs due to the cloning, which is invalid HTML and it’s not possible to handle correctly.
I’ve only seen this once in another case about 2 years ago, and I suggested using a different menu (which doesn’t use element cloning) instead as it is impossible to properly solve this. I still highly suggest a different approach, as element cloning really narrows the possibilities of placing other than simple elements into the header.
This time I took some time to figure out something that might solve this, although I cannot guarantee it will work properly each and every time. Place this script code into the footer of your site, just before the closing body tag (footer.php file in your theme directory, or equivalent):
This is a really fishy solution, I honestly cannot guarantee it’s going to work properly, but it’s worth a try.
Best,Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
