The reason for cloning is that the CMS I'm forced to use (which I don't have access to code behind, only able to add code over the top) automatically builds a top nav, and I want to add a duplicate sticky nav once the user scrolls, but also add a couple of elements to the scrolled version.
The original HTML of the top nav looks a bit like like:
<nav id="mainNavigation" style="white-space: normal; display: block;"> <div class="index"> <a href="/participate/">Participate</a> </div> <div class="index" style="margin-right: 80px;"> <a href="/news/">News</a> </div> <div class="index active" style="margin-left: 80px;"> <a class="active" href="/about/">About</a> </div> <div class="external"> <a href="/collection/">Collection</a> </div> <div class="index"> <a href="/contact/">Contact</a> </div> </nav>
I had mild success (other than those style tags I want to remove) with the following, even though it doesn't seem to make sense to me, as I expected some of the elements would be repeated (the whole < nav >…< /nav > tag should have been within the #mainNavigation clone, no?):
var originalNavItems = $('#mainNavigation').clone().html(); $("#site").prepend(' <div id="ScrollNavWrapper"> <div class="nav-wrapper show-on-scroll" id="mainNavWrapper"> <nav id="newScrolledNav" style="white-space: normal; display: block;"> <div class="index home"> <a href="/">Home</a> </div> ' + originalNavItems + ' <div class="newItem"> <a href="http://www.externalsite.com"> View on External Site </a> </div> </nav> </div> </div>');
I've tried to use a few answers from related questions on here, but I keep getting incorrect results. Can you help me?
You can strip the style elements like so:
var el = $('#mainNavigation'); // or whatever el.find('[style]').removeAttr('style');