Menu icon Foundation
Magellan inside top bar?

Hi All,

I'm attempting to do something very specific, but I can't quite figure out what I need to do to get it functioning properly.

I've got a site that uses Magellan for sticky nav. The nav is generated when the page loads, before the $(document).foundation() call. It works fine if I have a single Magellan instance, but when I add a second (a copy) it doesn't.

The first example in the code is the top-bar example. Which, when I put it into my code, doesn't work. The second example is the one that does work. Any time I add the first one, it breaks everything.

Any help is much appreciated.

-
Joel

<!-- NOT WORKING -->
<div class="main-nav fixed contain-to-grid mega">
    <nav class="top-bar" data-topbar>
        <div class="section top-bar-section">
            <div class="show-for-small-only" data-magellan-expedition>
                <ul class="sub-nav">
                    <!-- JS inserts links here -->
                </ul>
            </div>
            <ul class="left"><!-- Remaining Nav Here --></ul>
        </div>
    </nav>
</div>

<!-- WORKING -->
<main class="page-main">
    <div class="row">
        <div class="show-for-medium-up page-nav__wrapper" data-options="fixed_top:60;destination_threshold:120;threshold:-61;" data-magellan-expedition="fixed">
            <div class="row">
                <div class="column medium-2">
                    <div class="page-nav__header" data-magellan-arrival="top"><a href="#top">Section Name</a></div>
                </div>
                <div class="column medium-10">
                    <ol class="sub-nav" role="navigation">
                        <!-- JS Inserts Links here -->
                    </ol>
                </div>
            </div>
        </div>
    </div>
</main>
            

         

Magellantop-barFoundation-5

Hi All,

I'm attempting to do something very specific, but I can't quite figure out what I need to do to get it functioning properly.

I've got a site that uses Magellan for sticky nav. The nav is generated when the page loads, before the $(document).foundation() call. It works fine if I have a single Magellan instance, but when I add a second (a copy) it doesn't.

The first example in the code is the top-bar example. Which, when I put it into my code, doesn't work. The second example is the one that does work. Any time I add the first one, it breaks everything.

Any help is much appreciated.

-
Joel

<!-- NOT WORKING -->
<div class="main-nav fixed contain-to-grid mega">
    <nav class="top-bar" data-topbar>
        <div class="section top-bar-section">
            <div class="show-for-small-only" data-magellan-expedition>
                <ul class="sub-nav">
                    <!-- JS inserts links here -->
                </ul>
            </div>
            <ul class="left"><!-- Remaining Nav Here --></ul>
        </div>
    </nav>
</div>

<!-- WORKING -->
<main class="page-main">
    <div class="row">
        <div class="show-for-medium-up page-nav__wrapper" data-options="fixed_top:60;destination_threshold:120;threshold:-61;" data-magellan-expedition="fixed">
            <div class="row">
                <div class="column medium-2">
                    <div class="page-nav__header" data-magellan-arrival="top"><a href="#top">Section Name</a></div>
                </div>
                <div class="column medium-10">
                    <ol class="sub-nav" role="navigation">
                        <!-- JS Inserts Links here -->
                    </ol>
                </div>
            </div>
        </div>
    </div>
</main>
            

         
Rafi Benkual over 4 years ago

I'll take a look at your setup soon to see what's happening.

I know there is a working version here: http://foundation.joeworkman.net/samples/foundation1-2/ that Joe Workman made. Maybe this will help.