Menu icon Foundation
Foundation 5 Sticky Top Nav

How has everyone fared with the new Sticky Top Nav?
Mine just deosn't seem to stick. The dropdowns work, so I know the js is loading fine. But it just doesn't stick to the top when I scroll as promised. Anyone else?

<div class="contain-to-grid sticky">
    
	<nav class="top-bar" data-topbar>
		<ul class="title-area">
			<li class="name">
				
			</li>
		</ul>

		<section class="top-bar-section">
			<!-- Right Nav Section -->
			<ul class="right">
				<li class="active"><a href="#">Right Nav Button Active</a></li>
				<li class="has-dropdown">
					<a href="#">Right Button with Dropdown</a>
						<ul class="dropdown">
							<li><a href="#">First link in dropdown</a></li>
						</ul>
				</li>
			</ul>

			<!-- Left Nav Section -->
			<ul class="left">
				<li><a href="#">Left Nav Button</a></li>
			</ul>
		</section>
	</nav>

</div>

Any help would be appreciated. I downloaded the lastest build of 5 too.

Menu "Top Nav" Sticky

How has everyone fared with the new Sticky Top Nav?
Mine just deosn't seem to stick. The dropdowns work, so I know the js is loading fine. But it just doesn't stick to the top when I scroll as promised. Anyone else?

<div class="contain-to-grid sticky">
    
	<nav class="top-bar" data-topbar>
		<ul class="title-area">
			<li class="name">
				
			</li>
		</ul>

		<section class="top-bar-section">
			<!-- Right Nav Section -->
			<ul class="right">
				<li class="active"><a href="#">Right Nav Button Active</a></li>
				<li class="has-dropdown">
					<a href="#">Right Button with Dropdown</a>
						<ul class="dropdown">
							<li><a href="#">First link in dropdown</a></li>
						</ul>
				</li>
			</ul>

			<!-- Left Nav Section -->
			<ul class="left">
				<li><a href="#">Left Nav Button</a></li>
			</ul>
		</section>
	</nav>

</div>

Any help would be appreciated. I downloaded the lastest build of 5 too.


Will Morris gave the most helpful answer for this post
Will Morris about 6 years ago

Looks like this is fixed and will be released in 5.0.3:

https://github.com/zurb/foundation/issues/3608

This post has been closed. No new replies can be added.

Kevin Crow about 6 years ago

Well ... the only thing I can find on the sticky nav is in the http://foundation.zurb.com/docs/components/magellan.html page and the documentation on it is so vague that I have no idea how to even start getting it to work. The examples given don't seem to even match the page structure the examples are give on.

George From Ohio about 6 years ago

They have hidden it well, but if you search there is a (very very) small section on Sticky Top Bar, but even implemented as they have suggested or how it used to work in F4, the bar just does not as they suggest "it will act like the fixed top bar and stick to the top as users continue to scroll." I could use my other scripts but wanted to see if this just stopped working or is buggy.

Will Morris about 6 years ago

I'm having the same issue, even if I copy their sample code, the top bar doesn't stick to the top when you scroll.

Ashley Swartz about 6 years ago

Instead of contain-to-grid sticky for the div class, replace that with fixed. For me that behaves the same as the sticky did before.

Will Morris about 6 years ago

Looks like this is fixed and will be released in 5.0.3:

https://github.com/zurb/foundation/issues/3608

Caleb Winters about 6 years ago

Your JS may not be loading. JS isn't used for the dropdowns, that's all CSS. Try resizing the browser to a small size and see if the Menu button works. If it doesn't, then your JS paths are incorrect or the assets are missing.

George From Ohio about 6 years ago

No dice Caleb, the Menu button and everything else works fine. Seems the thread Will found has the solution. Was a spelling mistake in the js. Works fine now. Thanks everyone appreciate the help.