Menu icon Foundation
issues with sub-nav duplication

My sub-nav functions almost as I want it to, it's issues with alignment/background position that I'm having.

I have wrapped the sub-nav in a div row, and added this to my stylesheet:

.sub-nav {
      float: right;
    }
            

         

For some reason there are 2 sub-navs. One is fixed, but is half off the screen. The other is in the aligned correctly place but doesn't really do much and isn't fixed. I'm pretty stuck on how to go about resolving this!

Screen shot 2014 06 25 at 23.48.31

Here is the code for the sub-nav. Thanks!

<section id="menu">  <!-- menu section -->
            <div class="row">
                <div class="magellan-container" data-magellan-expedition="fixed" data-options="destination_threshold:65;throttle_delay:0;" style="position: fixed";>
                    <dl class="sub-nav">
                        <dd data-magellan-arrival="bcg" class="active"></dd>                  
                        <dd data-magellan-arrival="news" class="news"><a href="#news">News</a></dd>                  
                        <dd data-magellan-arrival="about" class><a href="#about">About</a></dd>               
                        <dd data-magellan-arrival="events" class><a href="#events">Events</a></dd>              
                        <dd data-magellan-arrival="committee" class><a href="#committee">Committee</a></dd>                 
                        <dd data-magellan-arrival="training" class><a href="#training">Training</a></dd>                    
                        <dd data-magellan-arrival="join" class><a href="#join">Join</a></dd>                                                    
                        <dd data-magellan-arrival="contact" class><a href="#contact">Contact</a></dd>        
                    </dl>
                </div>    
            </div>
        </section>
            

         

sub-navduplicationalignment

My sub-nav functions almost as I want it to, it's issues with alignment/background position that I'm having.

I have wrapped the sub-nav in a div row, and added this to my stylesheet:

.sub-nav {
      float: right;
    }
            

         

For some reason there are 2 sub-navs. One is fixed, but is half off the screen. The other is in the aligned correctly place but doesn't really do much and isn't fixed. I'm pretty stuck on how to go about resolving this!

Screen shot 2014 06 25 at 23.48.31

Here is the code for the sub-nav. Thanks!

<section id="menu">  <!-- menu section -->
            <div class="row">
                <div class="magellan-container" data-magellan-expedition="fixed" data-options="destination_threshold:65;throttle_delay:0;" style="position: fixed";>
                    <dl class="sub-nav">
                        <dd data-magellan-arrival="bcg" class="active"></dd>                  
                        <dd data-magellan-arrival="news" class="news"><a href="#news">News</a></dd>                  
                        <dd data-magellan-arrival="about" class><a href="#about">About</a></dd>               
                        <dd data-magellan-arrival="events" class><a href="#events">Events</a></dd>              
                        <dd data-magellan-arrival="committee" class><a href="#committee">Committee</a></dd>                 
                        <dd data-magellan-arrival="training" class><a href="#training">Training</a></dd>                    
                        <dd data-magellan-arrival="join" class><a href="#join">Join</a></dd>                                                    
                        <dd data-magellan-arrival="contact" class><a href="#contact">Contact</a></dd>        
                    </dl>
                </div>    
            </div>
        </section>