Menu icon Foundation
Navigation - Magellan - Toggle

Hey, 

i have a question about Top Bar - Magellan and the Toggle. 

For my project  I created a Navigation:

<div data-sticky-container>
        <div class="title-bar sticky " data-sticky data-options="top:0;" style="width:100%">
                <nav>
                                <div class="title-bar-left">


                                <a href="index.html"> <img src="../assets/img/logo.png"> </a>
                                            <div class="shape"></div>
                                </div>

                        <div class="title-bar-left">
                            <ul class="vertical medium-horizontal menu">
                                <li><a href="index.html">#</a></li>
                                <li><a href="#.html">#</a></li>
                                <li><a href="#.html">#</a></li>
                                <li><a href="#.html">#</a></li>
                            </ul>

                        </div>
                </nav>
        </div>
</div>

 

But the strange thing is, that after about 7oo px it toggles a the class 

is-stuck is-at-top

to

is-anchored is-at-bottom

 and  I have no idea why? I haven't used any javascript at all – except the init function of foundation. 

In the Content area there is a Magellan. 

<div data-sticky-container>
    <div class="sticky is-stuck is-at-top magelan"  data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0"  data-btm-anchor="bottomOfContentId:bottom">
        <nav data-magellan>
            <ul class="horizontal  section-menu menu" data-magellan>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
            </ul>
        </nav>
    </div>
</div>

and it works – yay – BUT on this page i have some Toggles and the strange thing is: the toggles won't work. But if I delete the magellan the toggles work fine and also i have no idea why. 

 <div class="row ">
        <div class="large-8 large-push-2 medium-10 medium-push-1 columns">
            <div class="row liste">
                <img class="large-2 medium-3 columns" src="../assets/img/logos/ORF.png">
                <p class="large-9  medium-8 columns">
TEXT
                </p>
                <a class="large-1 medium-1 columns info" data-toggle="00">Stuff</a>
        </div>

        </div>
    </div>
    <div class="row">
        <div class="callout hidden large-8 medium-10 medium-push-1 large-push-2" id="00"  data-toggler data-animate="slide-in-left slide-out-right">

            <table class="large-6 large-push-3">

            </table>
        </div>
    </div>

 

So does anybody have an idea, what i am doing wrong?

Thanks in advance! 

 

navigationtoggleMagellan

Hey, 

i have a question about Top Bar - Magellan and the Toggle. 

For my project  I created a Navigation:

<div data-sticky-container>
        <div class="title-bar sticky " data-sticky data-options="top:0;" style="width:100%">
                <nav>
                                <div class="title-bar-left">


                                <a href="index.html"> <img src="../assets/img/logo.png"> </a>
                                            <div class="shape"></div>
                                </div>

                        <div class="title-bar-left">
                            <ul class="vertical medium-horizontal menu">
                                <li><a href="index.html">#</a></li>
                                <li><a href="#.html">#</a></li>
                                <li><a href="#.html">#</a></li>
                                <li><a href="#.html">#</a></li>
                            </ul>

                        </div>
                </nav>
        </div>
</div>

 

But the strange thing is, that after about 7oo px it toggles a the class 

is-stuck is-at-top

to

is-anchored is-at-bottom

 and  I have no idea why? I haven't used any javascript at all – except the init function of foundation. 

In the Content area there is a Magellan. 

<div data-sticky-container>
    <div class="sticky is-stuck is-at-top magelan"  data-sticky data-margin-top="0" style="width:100%;" data-margin-bottom="0"  data-btm-anchor="bottomOfContentId:bottom">
        <nav data-magellan>
            <ul class="horizontal  section-menu menu" data-magellan>
                <li><a href="#">#</a></li>
                <li><a href="#">#</a></li>
            </ul>
        </nav>
    </div>
</div>

and it works – yay – BUT on this page i have some Toggles and the strange thing is: the toggles won't work. But if I delete the magellan the toggles work fine and also i have no idea why. 

 <div class="row ">
        <div class="large-8 large-push-2 medium-10 medium-push-1 columns">
            <div class="row liste">
                <img class="large-2 medium-3 columns" src="../assets/img/logos/ORF.png">
                <p class="large-9  medium-8 columns">
TEXT
                </p>
                <a class="large-1 medium-1 columns info" data-toggle="00">Stuff</a>
        </div>

        </div>
    </div>
    <div class="row">
        <div class="callout hidden large-8 medium-10 medium-push-1 large-push-2" id="00"  data-toggler data-animate="slide-in-left slide-out-right">

            <table class="large-6 large-push-3">

            </table>
        </div>
    </div>

 

So does anybody have an idea, what i am doing wrong?

Thanks in advance!