University of St Andrews

Sticky nav

The sticky nav is only for linking within a page to in-page content. It appears below the normal navigation bar and will affix to the top of the browser window as you scroll down past it. The sticky nav will also highlight the current section as you scroll down the page.

Rules for the sticky nav

• Must add the CSS position: relative; to the body for section highlighting to work.
• Must only be used on long pages.
• Must come below the page intro.
• Must not contain any dropdown menus.
• Must only contain links to in-page content.
• Must not be more than one row.
• Should not contain more than eight links.

Options available

• Sticky nav
• Old style (deprecated)

Sticky nav

<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<h2>Lorem ipsum</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere.</p>
		</div>
	</div>
</div>
 <!-- Begin pattern: sticky-nav //-->
<div class="visible-md-block visible-lg-block" id="internal-nav">
	<div id="nav-top" class="affix-top">
		<nav class="navigation-bar nav navbar" role="navigation">
		    <div class="container">
		        <ul class="navigation-bar-nav primary-nav">
						<li><a href="#courses">Courses</a></li>
						<li><a href="#testimonial">Testimonial</a></li>
						<li><a href="#visiting">Visiting</a></li>
						<li><a href="#news">News</a></li>
						<li><a href="#contact">Contact</a></li>
		        </ul>
		    </div>
		</nav>
	</div>
</div>
<!-- End pattern: sticky-nav //-->
<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<h3 id="courses">Courses</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
			<h3 id="testimonial">Testimonial</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
			<h3 id="visiting">Visiting</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
			<h3 id="news">News</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
			<h3 id="contact">Contact</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet sem ac dolor hendrerit sagittis a auctor dolor. Nulla velit metus, sollicitudin eu tristique nec, ultricies nec nisi. Quisque lobortis neque in diam gravida posuere. Nunc egestas posuere sem, vitae rhoncus felis scelerisque molestie. Mauris mi massa, iaculis gravida molestie in, facilisis non lorem. Quisque at nunc at nisl gravida sollicitudin. Vestibulum volutpat pretium purus et sodales. Integer sagittis sollicitudin molestie.</p>
		</div>
	</div>
</div>

Old style (deprecated)

See the code below for the old sticky nav markup. Do not use this HTML in new sites.

	<div class="accent-grey" id="internal-nav-dep"><div class="affix" id="nav-top"><nav class="navigation-bar" role="navigation"><div class="container"><div class="primary-toggle toggle-navigation"><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 aria-hidden="true" class="btn-lg glyphicon glyphicon-chevron-up top-link" style="float:right"><a href="#page"></a></li></ul></div></nav></div></div>