Hi all 
Excited to share SmartBar, now live on the Elements store — a premium navigation bar for RapidWeaver Elements. It’s a styled container where you drop your Menu (or anything else: Logo, buttons, search, language switchers…) and SmartBar takes care of everything else — position, scroll states, backgrounds, padding, and more.
What SmartBar does
SmartBar is a navigation bar you can position in three ways and style in up to three different states.
3 Positions:
• Fixed — always pinned, even as the page scrolls
• Sticky — starts in place and sticks when it reaches the top of the viewport
• Sticky By Anchor — starts in place and becomes sticky when the user scrolls past a specific section
3 States:
• Default — how SmartBar looks when the page loads
• Stuck — how it transforms after the user scrolls past a trigger point
• Custom — an alternative style you can activate when needed (great for dark hero sections that require a light version of the bar)
Each state has its own background, padding, borders, shadow, blur, colors — and every property is fully responsive, so SmartBar looks exactly right on mobile, tablet, and desktop.
Paired with SmartBar Anchor, the possibilities expand
SmartBar ships with a companion component called SmartBar Anchor. You drop an anchor on any page section and use it to tell SmartBar how to look and behave when the user scrolls into that section:
• Visibility — show or hide the entire SmartBar depending on where the user is on the page
• Width — make SmartBar narrower over the footer, wider over the hero
• Colors — transparent over the hero, solid over the content, accent color over the pricing section
• Internal elements — hide the logo in certain sections, show a context-specific CTA button only over the pricing area, swap language switchers across different contexts
This means SmartBar can literally change character as the user moves through the page.
As a natural bonus, anchors also act as landing points for One Page Navigation: SmartBar detects which anchor is currently visible and highlights the matching menu item automatically.
State-Based Overrides — for what’s inside SmartBar
SmartBar doesn’t just restyle itself — it can also override the look of the components you drop inside it, based on its current state (Default / Stuck / Custom). You tag the internal component with a dedicated CSS class, and SmartBar handles the rest.
Three override classes are available:
• Logo — manage logo colors and size per state (e.g. white logo over the hero, dark logo once scrolled past)
• Menu / Top Pages — manage link colors, hover, and One Page Navigation active states, per SmartBar state
• Custom — manage colors for any other component you want to keep visually in sync with SmartBar (a CTA button, a social icon row, a cart indicator…)
Everything is clean, reversible, and respects the native components — no messy !important, no modifications to the original components.
And plenty more under the hood
The above is just the tip of the iceberg. SmartBar includes many more features — custom hamburger styling for the mobile menu, configurable breakpoint for desktop-to-mobile transition, backdrop blur with responsive opacity, per-state announcement bar, scroll-direction show/hide behaviors, multi-instance support, and more. The best way to explore them is the live demo linked below.
Perfect for
• Marketing sites with hero sections that need contrast inversion (light bar over dark hero, dark bar over white content)
• Landing pages where the navigation should feel like part of the design system, not a stuck-on element
• Portfolio sites where the navbar changes character across project sections
• One-page scrollers with a clear “I’m sticky now” cue and active menu highlighting
Links
Live demo: SmartBar for Elements - RW Pro Space
Get SmartBar: Elements Store
Happy to answer questions or take feedback here. Thanks!
— Massimo