RapidWeaver Elements b17 (23008)
set nav bar to sticky but does not stick
Hi David,
The “Sticky” option under Layout > Position applies the CSS property position: sticky. However, it might not behave as intuitively as expected.
Simply setting Position to “Sticky” won’t automatically make your navbar stick to the top of the page. Here’s how to achieve that effect:
Option 1: Sticky Positioning
- Set Position to “Sticky”
- Choose Type as “Individual”
- Set Top to 0
Option 2: Fixed Positioning
- Set Position to “Fixed”
- Choose Type as “Individual”
- Set Top to 0
Understanding the Difference: Sticky vs. Fixed
• Sticky Positioning: The element with position: sticky will stay in place only after it has been scrolled to a specific point (e.g., Top set to 0). It combines characteristics of relative and fixed positioning, meaning it will move along with the page until it reaches the set position, where it then “sticks.” However, it requires a defined space around it to work effectively, so if the element’s container is too small or constrained, sticky positioning may not work as expected.
• Fixed Positioning: The element with position: fixed is completely removed from the document flow and will stay at a set position on the screen, regardless of scrolling. It is always visible at the specified position (e.g., top of the page) and doesn’t depend on other elements or its container size. This option is often more predictable for elements like a navbar, as it maintains its position consistently.
In most cases, “Fixed” will likely give you the desired result for a navbar that remains at the top of the page. However, feel free to experiment with both options to see which best suits your layout.
Hope this helps! 
thanks
I’m seeing some strange behavior when trying to setup a STICKY navbar.
I followed your suggestion to use the FIXED positioning and it works great.
The problem I’m running into is with the Z-index setting. If I set it to CUSTOM and give it a value it works, but if I select AUTO or NONE, the navbar disappears from the screen. It seems to be tied to the combo with the FIXED option but I have not done enough testing to be sure.
Thoughts?
This sounds like expected behaviour. What you are accessing is the underlying CSS properties for z index layering.
When you select Auto or None the navbar is behind the other components on the page - it hasn’t been removed.
So it sounds like all you need to do here is set the z index to Custom and add a positive number 
This feature allows you to move component forwards and backwards depending on the use case / design required.
Hope that helps!
Makes sense. Although because this is a navbar component I would have expected it to recognize that it should be above anything else on the page. So selecting AUTO would have done that for me.
But I can live with the current approach, once I had it figured out.
I completely understand what you’re saying.
However, auto is actually a valid value for the z-index CSS property and so the control is essentially setting z-index: auto;.