Table of Contents

Website Administrator

Available to users with full access to manage site and staff permissions

Style Block Required

Hover, focus, and active link states require a <style> block. Copy the entire snippet including the <style> block and paste both together into the Edlio WYSIWYG editor.

Sticky page navigation using Los Peñasquitos brand colors.

Preview

On This Page

• Introduction
• Getting Started
• Key Information
• Contact & Resources

<!-- TABLE OF CONTENTS (LOS PEÑASQUITOS) -->
<style>
nav[aria-label="Table of Contents"] a:hover {
    background-color: #00000022;
    border-left-color: #000000;
}

nav[aria-label="Table of Contents"] a:focus {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

nav[aria-label="Table of Contents"] a:active {
    background-color: #000000;
    color: #ffffff;
    border-left-color: #000000;
}

@media (max-width: 768px) {
    nav[aria-label="Table of Contents"] {
        position: relative !important;
        top: auto !important;
    }
}
</style>
<nav aria-label="Table of Contents" style="position: sticky; top: 12px; background-color: #ffffff; border: 1px solid #000000; border-radius: 6px; padding: 12px 14px; margin: 12px 0; box-shadow: 0 1px 4px rgba(0,0,0,0.08); max-width: 100%;">
    <h2 style="margin: 0 0 10px 0; font-size: 15px; font-weight: 700; color: #553191; border-bottom: 2px solid #000000; padding-bottom: 6px;">On This Page</h2>
    <ul style="list-style: none; margin: 0; padding: 0;">
        <li style="margin: 0; padding: 0;">
            <a href="#section-1" style="display: block; color: #553191; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Introduction</a>
        </li>
        <li style="margin: 0; padding: 0;">
            <a href="#section-2" style="display: block; color: #553191; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Getting Started</a>
        </li>
        <li style="margin: 0; padding: 0;">
            <a href="#section-3" style="display: block; color: #553191; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Key Information</a>
        </li>
        <li style="margin: 0; padding: 0;">
            <a href="#section-4" style="display: block; color: #553191; text-decoration: none; padding: 6px 8px; border-radius: 3px; font-size: 13px; font-weight: 500; line-height: 1.4; transition: all 0.3s ease; border-left: 2px solid transparent;">Contact &amp; Resources</a>
        </li>
    </ul>
</nav>