Close

Sticky nav

The sticky nav is only used for linking within a page to in-page content. It appears below the normal navigation bar and affixes to the top of the browser window as you scroll down past it. The sticky nav also highlights the current section as you scroll down the page.
Harcourt Hill Campus Library
Headington Campus Library
Wheatley Campus Library
Swindon Campus Library
Accessing other Libraries 
<style>.cms-content .js-desktop-course-navigation-slider a { text-decoration: none; }</style>
<section class="section mobile-course-navigation-wrapper is-hidden-tablet">
	<div class="container is-fullhd">
		<div class="control">
			<div class="mobile-course-navigation-select-wrapper">
				<label for="MobileCourseSelect" class="is-sr-only">Select a section</label>
				<select id="MobileCourseSelect" class="js-mobile-course-navigation has-text-weight-bold">
					<option value="" disabled selected hidden>Showing all information</option>
					<option value="profile">Harcourt Hill Campus Library</option>
					<option value="overview">Headington Campus Library</option>
					<option value="apply">Wheatley Campus Library</option>
					<option value="tuition">Swindon Campus Library</option>
					<option value="learning">Accessing other Libraries</option>
				</select>
				<div class="select-dropbox-button">

				</div>
			</div>
		</div>
	</div>
</section>
<section class="desktop-course-navigation-wrapper is-hidden-mobile m-bottom-20 p-bottom-20">
	<div class="container is-fullhd">
		<div class="desktop-course-navigation-placeholder">
			<div class="desktop-course-navigation js-desktop-course-navigation">
				<div class="desktop-course-navigation-slider-wrapper">
					<div class="js-desktop-course-navigation-slider desktop-course-navigation-slider">
						<div class="desktop-course-navigation-button in-view" data-id="harcourt-library">
							<a class="desktop-course-navigation-button-text" href="#harcourt-library">Harcourt Hill Campus Library</a>
						</div>
						<div class="desktop-course-navigation-button" data-id="headington-library">
							<a class="desktop-course-navigation-button-text" href="#headington-library">Headington Campus Library</a>
						</div>
						<div class="desktop-course-navigation-button" data-id="wheatley-library">
							<a class="desktop-course-navigation-button-text" href="#wheatley-library">Wheatley Campus Library</a>
						</div>
						<div class="desktop-course-navigation-button" data-id="swindon-library">
							<a class="desktop-course-navigation-button-text" href="#swindon-library">Swindon Campus Library</a>
						</div>
						<div class="desktop-course-navigation-button" data-id="other-libraries">
							<a class="desktop-course-navigation-button-text" href="#other-libraries">Accessing other Libraries</a>
						</div>
					</div>
				</div>
				<div class="desktop-course-navigation-slider-next-prev-button js-desktop-course-navigation-slider-next-prev-button">
				</div>
			</div>
		</div>
	</div>
</section>

Note: If you are adding this to a content block, you will have to add some CSS to the page to remove underlines on the links.

<style>
	.cms-content .js-desktop-course-navigation-slider a { text-decoration: none; }
</style>