Signal Dark's navigation bar sticks to the top of the viewport as you scroll. This page demonstrates the behaviour — scroll down and watch the nav stay fixed. Use the anchor links below to jump between sections.
How It Works
The navigation bar uses position: sticky with a top: 0 value. As you scroll past the header area, the nav locks to the top of the viewport. A subtle background blur and border appear via the .taid-nav.opaque class, which is toggled by an IntersectionObserver watching a sentinel element above the nav.
This is pure CSS + vanilla JS — no framework, no library. The sentinel pattern avoids scroll event listeners entirely, which means zero performance cost.
The sticky behaviour is built into the template and works on every page automatically. You don't need to enable it or configure anything.
Dual-Tier Menu
Signal Dark supports two navigation tiers: the main menu position (top bar) and the subnav position (secondary bar below). Both stick together as a unit.
The main menu holds your primary navigation — category links, key pages. The subnav holds secondary navigation, user login/logout, or breadcrumb-style context links. Both are optional — use one or both depending on your site structure.
When both tiers are present, the sticky offset adjusts automatically via CSS custom properties (--nav-h and --subnav-h). Scroll-to targets account for both bars so anchor links never land behind the navigation.
Scroll Behaviour
The template sets scroll-behavior: smooth on the root element and scroll-padding-top equal to the combined nav height. This means:
- Clicking an anchor link scrolls smoothly to the target
- The target lands below the sticky nav, not hidden behind it
- Browser back/forward respects the offset
- The reading progress bar (if enabled) tracks scroll position accurately
Try clicking the anchor links at the top of this page to see it in action. Each section heading has an ID that matches the link.
Mobile Behaviour
On screens below 992px, the main navigation collapses into a hamburger menu. The sticky behaviour remains — the compact nav bar stays at the top while scrolling. The hamburger opens a full-height overlay menu.
The subnav also collapses on mobile and stacks below the main nav when open. On very small screens (below 576px), the subnav hides entirely to preserve vertical space.
The backdrop-filter: blur() effect on the sticky nav is disabled on mobile via a media query. This is intentional — backdrop-filter creates a containing block for fixed-position children, which breaks the mobile menu overlay sizing.
Customisation
The sticky nav appearance is controlled by CSS custom properties. Override these in custom.css to change colours, blur intensity, or shadow:
/* Make the sticky nav more transparent */
.taid-nav.opaque {
background: rgba(10, 10, 15, 0.85);
backdrop-filter: blur(12px);
}
/* Remove the bottom border on scroll */
.taid-nav.opaque {
border-bottom-color: transparent;
}
/* Increase the nav height */
:root {
--nav-h: 80px;
}The sentinel element that triggers the opaque state is a zero-height div above the nav. If you want the nav to always be opaque (no transparent-to-solid transition), simply add the opaque class permanently in index.php.
CSS Reference
Key selectors for the sticky navigation:
.taid-nav-wrap /* Outer wrapper — contains nav + subnav */
.taid-nav /* Main nav bar */
.taid-nav.opaque /* Nav after scrolling past sentinel */
.taid-subnav /* Secondary nav bar */
.taid-menu /* Menu module wrapper */
.taid-nav-search /* Search module in nav */
.taid-hamburger /* Mobile menu toggle */
.taid-mobile-menu /* Mobile overlay menu */
.taid-mobile-menu.is-open /* Mobile menu when visible */
/* Custom properties */
--nav-h /* Main nav height (auto-calculated) */
--subnav-h /* Subnav height (auto-calculated) */
--sticky-offset /* Combined offset for scroll targets */The Blueprint (Part 3 and Part 14) covers the full template CSS architecture and every module position.