# 🚀 Introducing SmartBar — a smarter navigation bar for Elements
**URL:** https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829
**Category:** Elements Store
**Created:** [April 22, 2026, 7:12am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829 "2026-04-22T07:12:16Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@Massimo](https://forums.realmacsoftware.com/u/Massimo)
#### Post date: [April 22, 2026, 7:12am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/1 "2026-04-22T07:12:16Z")
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](https://www.rwpro.space/preview/smartbar/)
👉 **Get SmartBar** : [Elements Store](elementsapp://storeProduct/space.rwpro.smartbar)
Happy to answer questions or take feedback here. Thanks!
— Massimo
---
### Author:  [@Multiferry](https://forums.realmacsoftware.com/u/Multiferry)
#### Post date: [April 22, 2026, 1:12pm UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/2 "2026-04-22T13:12:57Z")
Hi there, I just purchased smartbar. Where can I find the promised project. Many thanks.
---
### Author:  [@Massimo](https://forums.realmacsoftware.com/u/Massimo)
#### Post date: [April 22, 2026, 1:34pm UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/3 "2026-04-22T13:34:00Z")
Thank you for your purchase!
When you open the **Create a New Project** window in Elements, you’ll find the demo project in your library.
---
### Author:  [@luckylindy](https://forums.realmacsoftware.com/u/luckylindy)
#### Post date: [April 22, 2026, 2:23pm UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/4 "2026-04-22T14:23:14Z")
I just purchased this without hesitation. Can’t wait to start playing with it; menu bars are super-critical to me and this component has all of the options and so many more I would want. Brilliant work. Good luck and much success with it, Massimo.
---
### Author:  [@Massimo](https://forums.realmacsoftware.com/u/Massimo)
#### Post date: [April 22, 2026, 3:19pm UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/5 "2026-04-22T15:19:54Z")
Hi @luckylindy, thank you for your purchase. Enjoy your SmartBar!
---
### Author:  [@herbing](https://forums.realmacsoftware.com/u/herbing)
#### Post date: [May 24, 2026, 9:42am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/6 "2026-05-24T09:42:40Z")
Hi @Massimo I bought SmartBar a day after launch and are playing with it now. It’s a really great component. Congrats!
I use it on a one page site and found 2 things that create problems for me:
1. Conflict with Fade-In Body (Pro) from MultiThemes. Q: Is there an option to disable the transitions in SmartBar. I don’t need it for my project and dislike the fade-in for the bar area on page load anyway. Maybe I have overlooked something or you possibly can add a setting for this?
2. If I use sticky with State-Based Overrides / Menu / One Page Navigation with option Activation by SmartBar Anchor and place the SmartBar Anchor right as the first element on the page, the corresponding menu Item will not be active, until I scroll a few pixel down. Q: Is this, because the anchor has to leave the view port to activate the corresponding menu item? Do have any idea to work-around this.
Thanks
---
### Author:  [@herbing](https://forums.realmacsoftware.com/u/herbing)
#### Post date: [May 26, 2026, 7:15pm UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/7 "2026-05-26T19:15:30Z")
Hi @Massimo
Did some further testing on topic 2. with transparent background in SmartBar and enabled debug in SmartBar Anchor to see what’s going on. It seems that the State-Based Overrides are executed only, when the SmartBar actually has entered Stuck mode, i.e. the red debug line and info for the SmartBar Anchor is displayed only after a very slight scroll down, which puts SmartBar from Default to Stuck mode.
Thanks again for taking a look.
---
### Author:  [@Massimo](https://forums.realmacsoftware.com/u/Massimo)
#### Post date: [May 27, 2026, 7:52am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/8 "2026-05-27T07:52:57Z")
> [@herbing](#):
>
> Fade-In Body (Pro)
Hi herbing, sorry for the delay.
1. I ran some tests with “Fade-In Body” (Free) and “SmartBar” on the same page, but unfortunately I couldn’t resolve the issue. Since I completely removed all references to `style.transition = 'none'` from the SmartBar JavaScript and replaced it with a CSS class (`.sb-disable-body-trans`), it’s physically impossible for SmartBar to still specifically remove the word “transition” from the body’s inline “style” attribute.
Perhaps @MultiThemes can help?
2. With “State-Based Overrides,” you can only change the colors for the SmartBar’s Stuck and/or Custom states. SmartBar always loads in the Default state, and you can’t override the Menu colors for that state.
---
### Author:  [@herbing](https://forums.realmacsoftware.com/u/herbing)
#### Post date: [May 27, 2026, 9:27am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/9 "2026-05-27T09:27:58Z")
Hi @Massimo
Thanks for getting back to me.
1. Isn’t it possible to have an option to disable “Transitions” at all. It always creates the slide in animation for the menu on page load and that is disturbing me as well? If you look on Realmac’s Menu component, they have the option “Apply to with several options, one of them None” in the Transitions. Maybe you find an idea in their component source on [GitHub](https://github.com/realmacsoftware/RWElementsCorePack/tree/main/packs/Core.elementsdevpack/components/com.realmacsoftware.navbar).
2. Understood. Can this be enhanced in a future build of the component or is this caused by technical restrictions, that cannot be circumvented?
---
### Author:  [@AnasHyeee](https://forums.realmacsoftware.com/u/AnasHyeee)
#### Post date: [June 15, 2026, 7:40am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/10 "2026-06-15T07:40:51Z")
Look great 👏🏻👏🏻👏🏻 l like it
---
### Author:  [@MultiThemes](https://forums.realmacsoftware.com/u/MultiThemes)
#### Post date: [June 16, 2026, 10:35am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/11 "2026-06-16T10:35:49Z")
yes it’s excellent, one of the best products in the store!
---
### Author:  [@Multiferry](https://forums.realmacsoftware.com/u/Multiferry)
#### Post date: [September 27, 2026, 10:54am UTC](https://forums.realmacsoftware.com/t/introducing-smartbar-a-smarter-navigation-bar-for-elements/55829/12 "2026-09-27T10:54:55Z")
Thans Massimo, I am currently working with the excellent tool. Can you please help me regarding a mobile trigger. Regards Ferry