The Sticky Navigation module in Surface Kit is engineered to solve one of the most common UI challenges in WordPress: keeping your site’s header accessible without adding heavy custom CSS or redundant scripts. Combined with the Scroll Progress Bar, it provides a subtle, “app-like” experience that keeps users oriented.
1. Overview of Navigation Surfaces #
Surface Kit handles your navigation as a floating “surface.” Instead of rebuilding your menu, the plugin takes your existing theme header and applies intelligent, performance-optimized logic to it.
- Zero-Jitter Logic: Engineered to prevent the “jumpy” layout shifts (CLS) often seen when headers switch to fixed positions.
- Performance Focused: Delivered as part of the unified 50KB asset core.
- Scroll Indicator: A built-in, lightweight progress bar that visually tracks the user’s reading journey.
2. Activation & Setup #
Step 1: Enable Sticky Navigation #
Navigate to Surface Kit → Dashboard.
- Locate the Sticky Header module and toggle it to Active.
- Target Selector: In the settings panel, input your header’s CSS selector (e.g.,
#main-headeror.site-header). Surface Kit will automatically identify this element to make it sticky.
Step 2: Enable Scroll Progress #
Within the same Navigation settings:
- Toggle Scroll Progress Bar to Active.
- This will inject a thin, customizable line at the very top of your sticky header (or the very top of the browser window) that fills as the user scrolls down.
3. Customization & Visuals (No-Code Editor) #
Sticky Header Effects #
- Stick on Scroll-Up: (Optional) Choose to only show the sticky header when a user scrolls back up—ideal for maximizing screen space on mobile.
- Glassmorphism Effect: Apply a subtle background blur and transparency so your content peeks through as it slides underneath.
- Shadows & Transitions: Add a sophisticated “lift” shadow that appears only when the header is in the sticky state.
Scroll Progress Styling #
- Bar Height: Set the thickness (standard is 2px to 4px for a minimalist look).
- Color & Gradients: Use your brand’s signature teal or a gradient from
tealtotransparent. - Positioning: Place it directly above the nav or fixed to the absolute top of the viewport.
4. Advanced Interaction Features #
| Feature | Description | Benefit |
| Mobile-Only Sticky | Enable sticky nav only for mobile users. | Better accessibility on small screens. |
| Hide on Specific Pages | Disable the sticky effect on landing pages or checkout. | Focuses user attention on the primary goal. |
| Progress Persistence | The bar remains accurate even if the page content loads dynamically. | High technical reliability. |
5. Performance Metrics #
Unlike dedicated “Sticky Menu” plugins that often load large jQuery libraries, Surface Kit’s navigation logic is written in vanilla JavaScript.
- Main Thread Efficiency: The scroll listener is throttled to ensure it doesn’t impact your Interaction to Next Paint (INP) score.
- Asset Size: The code footprint for both the sticky header and progress bar is less than 5KB within the unified bundle.
Design Tip: To maintain the “Smarter Engagement” aesthetic, match the Scroll Progress Bar color to the primary button in your Floating Action Hub. This creates a cohesive “visual thread” that guides the user throughout the entire site.
