Sticky navigation in Foundation 6

I had to experiment a bit to get Foundation's sticky top bar to work as it should. The documentation currently refers to version 5, so it's probably outdated.

HTML

You can combine the data-sticky and .top-bar divs, but then you have to specify a height or it collapses after scrolling down and back up.

<div data-sticky-container>
	<div data-sticky data-margin-top="0">
		<div class="top-bar">
			<div class="top-bar-title">
				<span data-responsive-toggle="main-nav">
					<button class="menu-icon dark" type="button" data-toggle></button>
				</span>
				Site title
			</div>
			<nav id="main-nav" class="top-bar-right">
				<ul class="menu dropdown vertical medium-horizontal" data-dropdown-menu>
					<li class="active"><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>
			</nav>
		</div>
	</div>
</div>

CSS

A z-index is needed to keep the mobile navigation above certain elements, such as orbit.

.sticky {
	z-index: 1;
	width: 100%;
}

This is one way to reduce the bar's size when the page is scrolled.

.sticky .top-bar {
	transition: padding 0.2s;
}

.sticky.is-stuck .top-bar {
	padding-top: 0;
	padding-bottom: 0;
}

Comments