How to make a sticky nav?

[jdfweb]

It was pretty simple in Foundation 5 - just add the "sticky" class. I've tried adding "data-sticky" and "data-sticky-container" to my nav, but it doesn't work (as stated here - http://foundation.zurb.com/sites/docs/magellan.html).

Any help on this would be appreciated!

[olefredrik]

I've added an example of sticky nav with magellan in the Kitchen Sink template:

Demo:
https://foundationpress.olefredrik.com/kitchen-sink

Source:
https://github.com/olefredrik/FoundationPress/blob/master/templates/kitchen-sink.php#L23
https://github.com/olefredrik/FoundationPress/blob/master/templates/kitchen-sink.php#L617

[jdfweb]

Hey Ole,

That doesn't really tell me much. It shows me the source code, but how do you actually implement it into FP?

This seems to be a re-curring issue with F6 to many people - getting sticky to work.

Let me know!

[dberz]

Hi -

I'm having issues implementing this too, specially updating the default Foundation Press 6 theme's "nav" to be sticky across the whole site. I understand the above examples, but those seem to be elements within the site vs. a navigation element above the entire site.

My question is, where in the default FoundationPress theme do you apply the "data-sticky-container" tag? And where do you apply the .sticky class and "data-sticky" tag?

In the example below, I modified the default FP6 nav slightly to include multiple menus for large screens.

1. Does the "data-sticky" get applied to the "nav" element? The "divs" within? Do I need to create another container for the name?
2. Does "data-sticky-container" get applied to the "header" element? "body" element? Somewhere else?

        <nav id="site-navigation" class="main-navigation top-bar" role="navigation">

            <div class="top-bar-left show-for-medium-up">
                <ul class="menu">
                    <li class="home">
                        <a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/logos/parsley_p.svg" ><span class="site-name"><?php bloginfo( 'name' ); ?></span></a>
                    </li>
                </ul>
            </div>

            <div class="top-bar-center show-for-medium-up">
                <?php foundationpress_top_bar_c(); ?>       
            </div>

            <div class="top-bar-right show-for-medium-up">
                <?php foundationpress_top_bar_r(); ?>

                <?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) == 'topbar' ) : ?>
                    <?php get_template_part( 'parts/mobile-top-bar' ); ?>
                <?php endif; ?>
            </div>

        </nav>

Also, but unrelated, I had a funky experience related to the visibility elements within the default FoundationPress 6 nav.

The default .show-for-medium class within the .top-bar-xxx elements ONLY showed the nav for medium views. I had to adjust this to .show-for-medium-up to get the desktop nav to appear for all non-small screens. Seems a bit odd.

<div class="top-bar-left show-for-medium-up">

Thank you!
David

[elicohenator]

i'm also looking for an answer to this issue. please let us know . thank

[dberz]

I think I found what I needed in this thread: http://foundation.zurb.com/forum/posts/36690-how-to-create-a-sticky-top-bar-on-foundation-6.

Seems a bit hacky though - the mobile menu is drawn behind the site content so you need to mess with z-index to fix this.

I would be curious to know if there is a cleaner way to implement this.

1 Add two new DIVs directly above the FP6 NAV:

<div class="top-bar-container" data-sticky-container>
<div class="sticky is-stuck" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">

2 Add the following custom CSS:

.sticky {
    width: 100%;
  position: absolute;
  z-index: 0;
  transform: translate3d(0, 0, 0);
}

.sticky.is-stuck {
  position: fixed;
  z-index: 5;
}

[dberz]

The solution above is imperfect. The nav dropdowns work fine on first load, but after scrolling down and back up, the dropdown items are behind the main site content.

See: https://parsleyhealth.com/

Would appreciate thoughts on the best implementation of a sticky main nav in FoundationPress 6.

[dberz]

So.. Ignore my code example above. The final code I used included an inline style to set the z-index above the body content. It works... for now... I think...

<div class="top-bar-container" data-sticky-container>
<div class="sticky" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;" style="width:100%; z-index:2">

        <nav id="site-navigation" class="main-navigation top-bar" role="navigation">

            <!-- DB CUSTOM NAV -->
            <div class="top-bar-left show-for-medium-up">
                <ul class="menu">
                    <li class="home">
                        <a href="<?php echo home_url(); ?>"><img src="<?php bloginfo('template_directory'); ?>/assets/logos/parsley_p.svg" ><span class="site-name"><?php bloginfo( 'name' ); ?></span></a>
                    </li>
                </ul>
            </div>

            <div class="top-bar-center show-for-medium-up">
                <?php foundationpress_top_bar_c(); ?>       
            </div>

            <div class="top-bar-right show-for-medium-up">
                <?php foundationpress_top_bar_r(); ?>
            </div>

            <div class="db-mobile-menu">
                <?php if ( ! get_theme_mod( 'wpt_mobile_menu_layout' ) || get_theme_mod( 'wpt_mobile_menu_layout' ) == 'topbar' ) : ?>
                    <?php get_template_part( 'parts/mobile-top-bar' ); ?>
                <?php endif; ?>
            </div>

        </nav>

</div>
</div>

[toddheslin]

To add to @dberz's excellent example, I found that I needed to change 'anchor' in the data-options to 'anchor-top' for it to truely stick to the top of my page. Otherwise it would only be sticky after the full page scrolled past the fold. Hope this helps.

[roborracle]

+1 for @dberz' solution works like a charm

[olefredrik]

👍