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.


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>
				Site title
			<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>


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;
} .top-bar {
	padding-top: 0;
	padding-bottom: 0;