0

I really can't understand the difference between what I have done and what the example in the Foundation 6 Documents is: foundation.zurb.com

The functionality that I would like is for when you scroll and go past my sub-menu it the sticks to the top of the screen... instead as soon as I scroll down from the top of the page the sub menu sticks to the top of the screen. The functionality that I would like is exactly the same as the image in the example Foundation 6 give in their docs.

This is the code that I have: 

<div data-sticky-container>

<section class="panel-tan navigation-panel sticky"
         data-sticky
         data-margin-top="0"
         style="width:100%">
    <div class="show-for-small-only navigation-panel-icon">
        <i class="icon icon-add"></i>
    </div>

    <div class="row">
        <ul class="menu small-12 column">
            <?php

            // check if the repeater field has rows of data
            if( have_rows('navigation_items') ):
                $item_count = 0;
                // loop through the rows of data
                while ( have_rows('navigation_items') ) : the_row();
                $item_count++;
                ?>

                    <li><a href="#item-<?php echo $item_count; ?>"><?php echo the_sub_field('item_title'); ?></a></li>
            <?php endwhile;

            else : ?>
            <div class="column small-12">
                <p>
                    No Data Found!, please enter data in the columns field in the admin
                </p>
            </div>
            <?php endif; ?>
        </ul>
    </div>
</section>

</div>
apaderno
  • 28,547
  • 16
  • 75
  • 90
Max Lynn
  • 1,738
  • 6
  • 22
  • 35
  • Hm, shouldn't that be `data-options="marginTop:0;"`, not `data-margin-top="0"`? – Serlite Sep 14 '16 at 19:33
  • Afraid this does the same thing either way. – Max Lynn Sep 14 '16 at 19:35
  • Can you create a demo using the generated markup that replicates the problem? I think that would be helpful in determining whether you've missed something. Also, ensure that you're not just missing some of the JS dependencies for this, there are a few. – Serlite Sep 14 '16 at 19:56
  • I've given up with it tbh and just coded my own version in Jquery... Wasn't too hard. Thank you for you time – Max Lynn Sep 14 '16 at 20:03
  • May be this answer could help http://stackoverflow.com/questions/38409034/foundation-6-magellan-sticky-not-working-with-zurb-template-cli-install/38411825#38411825 – Hari Harker Sep 22 '16 at 13:33
  • Max Lynn, what did you work out? I have exactly that problem here with F6: http://kad.abricot-production.com/ – Andy Nightingale May 25 '17 at 13:59

0 Answers0