1. Design System
  2. Components
  3. Sticky nav

Sticky nav

<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 in-view" 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>

Usage

Accessibility