Page navigation

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 -->
                <nav class="in-page-nav pull-right bg-mint-75-light">
                    <header>
                        <div class="row column">
                            <h1>On this page</h1>
                        </div>
                    </header>
                    <ul>
                        <li><a href="#section-a">Section A</a></li>
                        <li><a href="#section-b">Section B</a></li>
                        <li><a href="#section-c">Section C</a></li>
                        <li><a href="#section-d">Section D</a></li>
                        <li><a href="#section-e">Section E</a></li>
                        <li><a href="#section-f">Section F</a></li>
                        <li><a href="#section-g">Section G</a></li>
                        <li><a href="#section-h">Section H</a></li>
                        <li><a href="#section-i">Section I</a></li>
                        <li><a href="#section-j">Section J</a></li>
                    </ul>
                </nav>
                <!-- 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>