The page navigation floats at the top-right of the page.
<section class="course-overview bg-steel-85-light stack-section medium-padding" id="course-overview">
<div class="row column">
<div class="flex-wrapper">
<div class="single-item">
<!-- COMPONENT: Page navigation -->
<div class="sidebar pull-right">
<!-- In-page nav -->
<nav class="panel in-page-nav bg-mint-75-light">
<h1>On this page</h1>
<ul>
<li><a href="#course-structure">Course structure</a></li>
<li><a href="#learning-assessment">Learning and assessment</a></li>
<li><a href="#case-study">Case study</a></li>
<li><a href="#entry-requirements">Entry requirements</a></li>
<li><a href="#fees-funding">Fees and funding</a></li>
<li><a href="#kis-widget">Unistats</a></li>
<li><a href="#application-information">Application information</a></li>
</ul>
</nav>
</div>
<!-- End component: Page navigation -->
<!-- Text block -->
<div class="markdown">
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, id venenatis accumsan condimentum platea pharetra convallis phasellus, fringilla libero ridiculus faucibus enim parturient.</p>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, convallis eget quam pharetra ultrices varius vitae nascetur, purus orci odio netus ad cubilia.</p>
<p>Phasellus nascetur at et accumsan etiam duis a posuere vulputate convallis, gravida litora quis inceptos volutpat dignissim condimentum elit.</p>
<p>Sit eu dignissim condimentum dui sociosqu <a href="#">cubilia id sollicitudin molestie</a> class, euismod lobortis erat hac orci pharetra quis massa sociis, dolor non proin vivamus tortor platea montes facilisi dictumst.</p>
<p>Cursus semper sapien erat posuere inceptos gravida, habitasse tortor ut facilisi egestas sollicitudin, aptent quisque laoreet aliquet penatibus.</p>
<p>Fusce commodo vivamus accumsan massa tellus ultrices netus parturient nam habitasse, malesuada congue laoreet lectus egestas ut turpis vitae.</p>
</div>
</div>
</div>
</div>
</section>