Menu icon Foundation
Magellan sub-nav troubles

Good day!

I'm having a lot of trouble figuring out how to setup my magellan sub-nav.

What works:

When I click on the arrival links in the sub bar I'm taken to the correct destination on the page.

What doesn't:

The links don't change when I hover over them, or become 'active' when the page is scrolled to the destination.

Upac foundation screenshot1

I've ensured that the following are uncommented in app.scss:

@import "foundation/components/sub-nav";
@import "foundation/components/magellan";

This is the relevant code from _settings.css:

// 3.26 - Sub Nav
$include-html-nav-classes: $include-html-classes;

// We use these to control margin and padding
$sub-nav-list-margin: em-calc(-4 0 18);
$sub-nav-list-padding-top: em-calc(4);

// We use this to control the definition
// $sub-nav-font-family: $body-font-family;
$sub-nav-font-size: em-calc(14);
$sub-nav-font-color: #000;
$sub-nav-font-weight: normal;
$sub-nav-text-decoration: none;
$sub-nav-border-radius: 3px;
// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);

// We use these to control the active item styles
$sub-nav-active-font-weight: normal;
$sub-nav-active-bg: $upac-blue;
$sub-nav-active-bg-hover: $upac-blue;
$sub-nav-active-font-color: #fff;
$sub-nav-active-padding: em-calc(3 9);
$sub-nav-active-cursor: default;

$sub-nav-item-divider: "" !default;
$sub-nav-item-divider-margin: emCalc(12) !default;
            

         

and here is a snippet from my html:

<div data-magellan-expedition="fixed" style="position: fixed; top: 0px;">  
    <dl class="sub-nav">    
        <dd data-magellan-arrival="news" class=""><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>         

<section id="about_section" style="background-color: #72a5d6"> <!-- about section -->

            <div class="row">

                <div class="small-12 columns">

                    <a name="about"></a>
                    <h1 data-magellan-destination="about">About</h1>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor lorem non ipsum porttitor rhoncus. Vestibulum consequat dolor sit amet magna laoreet tincidunt vitae ut purus. Vestibulum at arcu euismod, tristique ipsum et, facilisis lorem. Cras molestie, magna luctus tincidunt dignissim, augue sapien posuere diam, at rhoncus eros ligula ac velit. Aliquam molestie gravida ligula. Nunc tristique eros at felis imperdiet, ut gravida mi rutrum. Duis dapibus semper quam vel pellentesque. Fusce a purus augue. Quisque sagittis porta pretium. Suspendisse placerat lacus a auctor scelerisque. Integer orci augue, posuere vel elit vel, faucibus aliquam ipsum. Nam dapibus, odio at molestie facilisis, dui dolor commodo erat, ut cursus purus tellus vitae velit. Cras rutrum ultrices nulla, et sodales nisl gravida at. Mauris at metus mi. In cursus eros diam. Maecenas nec auctor sapien.</p>
    
                </div> <!-- end column -->

            </div> <!-- end row --> 

        </section> <!-- end about section -->
            

         

Hopefully someone can make sense of this!

Thanks

Magellansub-navactivescroll

Good day!

I'm having a lot of trouble figuring out how to setup my magellan sub-nav.

What works:

When I click on the arrival links in the sub bar I'm taken to the correct destination on the page.

What doesn't:

The links don't change when I hover over them, or become 'active' when the page is scrolled to the destination.

Upac foundation screenshot1

I've ensured that the following are uncommented in app.scss:

@import "foundation/components/sub-nav";
@import "foundation/components/magellan";

This is the relevant code from _settings.css:

// 3.26 - Sub Nav
$include-html-nav-classes: $include-html-classes;

// We use these to control margin and padding
$sub-nav-list-margin: em-calc(-4 0 18);
$sub-nav-list-padding-top: em-calc(4);

// We use this to control the definition
// $sub-nav-font-family: $body-font-family;
$sub-nav-font-size: em-calc(14);
$sub-nav-font-color: #000;
$sub-nav-font-weight: normal;
$sub-nav-text-decoration: none;
$sub-nav-border-radius: 3px;
// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);

// We use these to control the active item styles
$sub-nav-active-font-weight: normal;
$sub-nav-active-bg: $upac-blue;
$sub-nav-active-bg-hover: $upac-blue;
$sub-nav-active-font-color: #fff;
$sub-nav-active-padding: em-calc(3 9);
$sub-nav-active-cursor: default;

$sub-nav-item-divider: "" !default;
$sub-nav-item-divider-margin: emCalc(12) !default;
            

         

and here is a snippet from my html:

<div data-magellan-expedition="fixed" style="position: fixed; top: 0px;">  
    <dl class="sub-nav">    
        <dd data-magellan-arrival="news" class=""><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>         

<section id="about_section" style="background-color: #72a5d6"> <!-- about section -->

            <div class="row">

                <div class="small-12 columns">

                    <a name="about"></a>
                    <h1 data-magellan-destination="about">About</h1>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempor lorem non ipsum porttitor rhoncus. Vestibulum consequat dolor sit amet magna laoreet tincidunt vitae ut purus. Vestibulum at arcu euismod, tristique ipsum et, facilisis lorem. Cras molestie, magna luctus tincidunt dignissim, augue sapien posuere diam, at rhoncus eros ligula ac velit. Aliquam molestie gravida ligula. Nunc tristique eros at felis imperdiet, ut gravida mi rutrum. Duis dapibus semper quam vel pellentesque. Fusce a purus augue. Quisque sagittis porta pretium. Suspendisse placerat lacus a auctor scelerisque. Integer orci augue, posuere vel elit vel, faucibus aliquam ipsum. Nam dapibus, odio at molestie facilisis, dui dolor commodo erat, ut cursus purus tellus vitae velit. Cras rutrum ultrices nulla, et sodales nisl gravida at. Mauris at metus mi. In cursus eros diam. Maecenas nec auctor sapien.</p>
    
                </div> <!-- end column -->

            </div> <!-- end row --> 

        </section> <!-- end about section -->
            

         

Hopefully someone can make sense of this!

Thanks

Preston McPeak about 5 years ago

Hey, you need to put your anchor tag inside the tag like so:

<h2 data-magellan-destination="cli"><a name="cli"></a>Recommended Install for Foundation</h2>