foundation plugins


#1

In Adi Purdila’s ‘Getting Started with Foundation’ 3.5 Plugins section, he covers the Magellan plugin with the sticky nav. The sticky nav is not working but he doesn’t address it. The video ends and the nav isn’t sticky.

Here is the code:

       <div data-sticky-container>
	<div class="sticky" data-sticky>
		<nav data-magellan>
			<ul class="menu">
				<li><a href="#section-1">Section 1</a></li>
				<li><a href="#section-2">Section 2</a></li>
				<li><a href="#section-3">Section 3</a></li>
			</ul>
		</nav>
	</div>
</div>
<div class="row">
        	<div class="columns small-3">
        			<div id="section-1" data-magellan-target="section-1">
        				<p>Section 1dolor</p>
        				<p>Lore</p>
        			</div>

    			<div id="section-2" data-magellan-target="section-2">
    				<p>Section 2 dolo</p>
    				<p>Lorem ipsum </p>
    			</div>

    			<div id="section-3" data-magellan-target="section-3">
    				<p>Section 3dolor sit</p>
    				<p>Lorem ipsum.</p>
    			</div>
    	</div>
    </div>

#2

Hi @lakenney, I know what you mean–there does appear to be some kind of glitch in the demo Adi uses in the lesson, but rest assured the code does work. I’ve created a quick demo, using exactly the same markup as Adi, but with some extra content and a few styles in the <head> to make it clearer. Check it out: http://cl.ly/433R3M3j3e3J

cc @AdiPurdila


#3

Hi @lakenney, you’re right, the plugin didn’t work correctly in the lesson. I’m not sure why since Ian’s code is the same and it does work. That was an oversight on my part and I apologise for that. Please use Ian’s code above for that part of the lesson and let us know if it works for you.

@ianyates Thanks for the code Ian!