Hi Eno,
It’s nice to hear from you.
It fails mainly because of 3 reasons:
1. Cloning creates the exact copy of the search, however it only creates the HTML elements and not the event handlers. There is a fail-safe method implemented into the plugin to try to fix this if it recognizes changes, but it will most likely fail.
2. Because the duplication will create the exact same element, with the exact same ID – which is not only invalid HTML, but the javascript won’t be able to locate the search elements, as the jQuery function will fail because of the duplication.
3. All the 3rd party script event handlers will fail as well.
Duplicating itself is a really bad practice, but I guess it’s ok in cases where no element IDs or element names are involved – and the Node structure is relatively simple – like in menu items, links and such.
However the search plugin is a very complex structure of HTML elements and uses lots of javascript event handlers to do it’s things.
Whenever you change/move/duplicate a Node inside a structure which has event handlers attached to it, they will be automatically de-attached – because the DOM Node tree changes, and it’s no longer the same element. In case of duplication it’s even worse, as the same element will exist twice with the same ID.
All in all, I’m not saying it’s not possible to fix, but nearly impossible. And it’s going to break at the first update for sure.
If I may suggest, try using a different solution instead of the cloning. I’ve seen these “sticky” menus in lots of themeforest themes, and it’s terrible. They look nice, but you cannot put anything fancy in there. There are way better pure CSS3 solutions availble, for example:
1. http://designmodo.com/sticky-navigation-css-jquery/
2. http://demo.hongkiat.com/css-sticky-position/index2.html
3. http://codepen.io/senff/pen/ayGvD
These are essentially the same, but without that cloning, which I think should be avoided for so many reasons.
Best,Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)
