GEARBOX Fin System

Elements Built with Elements
1

:desktop_computer: GEARBOX Fin system

:hammer_and_wrench: Built with Elements by Robin Mair

:link: Visit the site: GEARBOX Fin System

:pencil: 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. 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 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.

3 Likes
2

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

3

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
CleanShot 2025-06-02 at 09.19.19@2x620×736 41.7 KB

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.

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

4

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

1 Like
5

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.

6

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

7

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.