# GEARBOX Fin System

**URL:** <https://forums.realmacsoftware.com/t/gearbox-fin-system/47885>\
**Category:** Built with Elements\
**Created:** [June 2, 2025, 6:32pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885 "2025-06-02T18:32:30Z")\
**Posts on this page:** 7\
**Page:** 1

<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:** [June 2, 2025, 6:32pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885/1 "2025-06-02T18:32:30Z")

</div>

🖥 GEARBOX Fin system

🛠 Built with [Elements](https://elementsapp.io/) by Robin Mair

🔗 Visit the site: [GEARBOX Fin System](https://gearbox.surf/)

✏ Builders Notes (optional):

This is a legacy site for our previous generation fin system. It is largely a port of the site from Classic/Stacks to [Elements](https://elementsapp.io/). It was an amazingly fast process as the majority of the port was done in three days. Another three days were spent optimizing images and other resources. [Elements](https://elementsapp.io/) made this porting process extremely easy. Along the way, the site got better looking in the process even though we did not try to make radical design changes.

---

<div class="post-metadata">

**Author:** ![numericcitizen](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/numericcitizen/32/26930_2.png) [@numericcitizen](https://forums.realmacsoftware.com/u/numericcitizen)\
**Post date:** [June 2, 2025, 7:03pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885/2 "2025-06-02T19:03:45Z")

</div>

I love your menu style… can you elaborate on how you did it?

---

<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:** [June 2, 2025, 7:24pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885/3 "2025-06-02T19:24:22Z")

</div>

Are you referring to the sticky nature of the navbar?

If so I use the FIXED settings in the Layout section for the menu, see below.

 ![CleanShot 2025-06-02 at 09.19.19@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/b/2b2c3bd71686c440d1b5a4976be8f0f782b9191d.png)

This is then coupled with a custom component that handles the resizing of the menu when it reaches the top of the screen. Below is the script that makes up the content of the component.

```auto
<script>
	const menu = document.getElementById('sticky-menu');
	window.addEventListener('scroll', () => {
	  if (window.scrollY > 150) {
        menu.style.setProperty("inset", "0px");
        menu.style.setProperty("border-radius", "0px");
	  } else {
        menu.style.setProperty("inset", "1rem");
        menu.style.setProperty("border-radius", "0.75rem");
	  }
	});
</script>

```

For this to work the menu needs to be assigned the ID `sticky-menu` and then you are good to go.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 2, 2025, 7:25pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885/4 "2025-06-02T19:25:40Z")

</div>

Checked out your site on my mobile, nice you made sure it was responsive and works, it is easy not to ensure everything fits,

---

<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:** [June 2, 2025, 9:37pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885/5 "2025-06-02T21:37:54Z")

</div>

Yes, it takes some effort to get that right. Unfortunately, there is some sort of caching problem with the website on a phone, where it is still shoinw some of the olders versions of the pages.

Never ending try to get the browsers to behave.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [June 3, 2025, 5:50pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885/6 "2025-06-03T17:50:13Z")

</div>

I have that issue sometimes I have to reset the cache in the providers controls, not sure that is your problem though

---

<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:** [June 3, 2025, 6:55pm UTC](https://forums.realmacsoftware.com/t/gearbox-fin-system/47885/7 "2025-06-03T18:55:20Z")

</div>

Yes, I don’t think there is anything I can do about it other than clear the cache which is not that easy on a phone. It eventually sorts itself out but it is very frustrating when navigating the site and you get pages that are from different versions.