# Navigation Bar not sticking

**URL:** <https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174>\
**Category:** RapidWeaver Elements\
**Created:** [November 7, 2024, 8:34am UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174 "2024-11-07T08:34:40Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [November 7, 2024, 8:34am UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174/1 "2024-11-07T08:34:40Z")

</div>

RapidWeaver Elements b17 (23008)  
set nav bar to sticky but does not stick

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [November 7, 2024, 3:33pm UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174/2 "2024-11-07T15:33:35Z")

</div>

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**

1. Set **Position** to “Sticky”
2. Choose **Type** as “Individual”
3. Set **Top** to 0

 ![Screenshot 2024-11-07 at 16.32.51](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/f/7/f768f80862bc8232fce5877245e6b6c840718cab.png)

**Option 2: Fixed Positioning**

1. Set **Position** to “Fixed”
2. Choose **Type** as “Individual”
3. 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! 😊

---

<div class="post-metadata">

**Author:** ![Godber](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/godber/32/26521_2.png) [@Godber](https://forums.realmacsoftware.com/u/Godber)\
**Post date:** [November 7, 2024, 3:49pm UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174/3 "2024-11-07T15:49:53Z")

</div>

thanks

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 7, 2024, 7:14pm UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174/4 "2024-11-07T19:14:25Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [November 8, 2024, 10:05am UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174/5 "2024-11-08T10:05:27Z")

</div>

> [@handshaper](#):
>
> 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.

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!

---

<div class="post-metadata">

**Author:** ![handshaper](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/handshaper/32/27373_2.png) [@handshaper](https://forums.realmacsoftware.com/u/handshaper)\
**Post date:** [November 8, 2024, 6:33pm UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174/6 "2024-11-08T18:33:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [November 8, 2024, 6:44pm UTC](https://forums.realmacsoftware.com/t/navigation-bar-not-sticking/45174/7 "2024-11-08T18:44:15Z")

</div>

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;`.
