Responsive Header Demo
Resize the browser to see the navbar collapse into a hamburger menu on small screens. The header stays sticky on scroll.
How It Works
- Desktop (≥ 768px): Standard horizontal navbar with ply's default styling.
- Mobile (≤ 767px): A
<details>/<summary>element acts as a CSS-only hamburger toggle. No JavaScript needed. - Sticky: The
stickyclass withtop: 0keeps the header pinned on scroll. - Accessible:
<details>is natively keyboard-accessible (Enter/Space toggles). Skip link is provided.aria-current="page"marks the active page.
Feature One
Scroll down to see the sticky header in action. The navigation stays visible at the top of the viewport.
Feature Two
The mobile menu uses native HTML disclosure — no JavaScript framework required, works with ply out of the box.
End of page.