Digital pattern library

Sticky nav

The sticky nav is for linking within a page to in-page content only; it appears below the normal navigation bar and will affix to the top as you scroll down to it.


Example

Code

 <!-- Begin pattern: sticky-nav //-->

<div class="accent-grey" id="internal-nav">
	<div id="nav-top" class="affix">
		<nav class="navigation-bar" role="navigation">
		    <div class="container">
		        <div class="toggle-navigation primary-toggle"><a class="navigation-button">Navigation <i class="chevron left"></i></a></div>
		        <ul class="navigation-bar-nav primary-nav" style="width:100%;">
						<li><a href="##">Courses</a></li>
						<li><a href="##">Testimonial</a></li>
						<li><a href="##">Another link</a></li>
						<li><a href="##">Yet another</a></li>
						<li><a href="##">The last one</a></li>
			        <li style="float:right;" class="top-link glyphicon glyphicon-chevron-up btn-lg" aria-hidden="true"><a href="#page"></a></li>
		        </ul>
		    </div>
		</nav>
	</div>
</div>


<!-- End pattern: sticky-nav //-->