# Tutorial: How to Build a Sticky Menu - Part 2

**URL:** <https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049>\
**Category:** Elements\
**Created:** [January 23, 2025, 1:01pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049 "2025-01-23T13:01:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [January 23, 2025, 1:01pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/1 "2025-01-23T13:01:15Z")

</div>

This is part 2 of our Sticky Menu Tutorial, you can [watch part 1 here](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu/46037).

In this advanced tutorial we use some Javascript to adjust the look of our menu when the user scrolls down the page.

Code examples and the sample project is [available here, in the Elements Manual](https://docs.realmacsoftware.com/elements-docs/elements-app/how-to/build-a-sticky-menu).

[![](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/0/d08282a9e949c9f0a1d43a982a19ba4f2003f5ff.jpeg "How to Build a Sticky Menu - Part 2 of 2") ](https://www.youtube.com/watch?v=Wv7J6BpHoEA)

---

<div class="post-metadata">

**Author:** ![mrTablet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mrtablet/32/21819_2.png) [@mrTablet](https://forums.realmacsoftware.com/u/mrTablet)\
**Post date:** [January 23, 2025, 2:26pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/2 "2025-01-23T14:26:30Z")

</div>

Very good, but when you have a background image in the header, it doesn’t look as fancy.

 ![Menu](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/4/a4743749d068000c42dfc3b3744568087837e2dc.png)

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [January 23, 2025, 2:40pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/3 "2025-01-23T14:40:21Z")

</div>

You can fix this by changing how it’s set up in your project. Can you share your project so I can advise on the changes?

---

<div class="post-metadata">

**Author:** ![mrTablet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mrtablet/32/21819_2.png) [@mrTablet](https://forums.realmacsoftware.com/u/mrTablet)\
**Post date:** [January 23, 2025, 2:46pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/4 "2025-01-23T14:46:11Z")

</div>

I have sent you an email.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [January 23, 2025, 2:57pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/5 "2025-01-23T14:57:33Z")

</div>

Got it, and fixed it!

I’ve emailed back the updated project 😊

---

<div class="post-metadata">

**Author:** ![mrTablet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mrtablet/32/21819_2.png) [@mrTablet](https://forums.realmacsoftware.com/u/mrTablet)\
**Post date:** [January 23, 2025, 5:50pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/6 "2025-01-23T17:50:54Z")

</div>

Thank you very much. I should have realized it should be done that way 😊

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [January 23, 2025, 6:34pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/7 "2025-01-23T18:34:49Z")

</div>

No problem, glad I could help, and it’s easy once you know how to do it 😊

---

<div class="post-metadata">

**Author:** ![mrTablet](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/mrtablet/32/21819_2.png) [@mrTablet](https://forums.realmacsoftware.com/u/mrTablet)\
**Post date:** [January 23, 2025, 6:44pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/8 "2025-01-23T18:44:05Z")

</div>

@dan I want the menu to start with rounded corners, and when it is in full width, the menu should not have rounded corners. I have tried the code below, but it is not working. Any tips?

```auto
<script>
	const menu = document.getElementById('fancymenu');
	window.addEventListener('scroll', () => {
	  if (window.scrollY > 100) {
		menu.style.setProperty("width", "100%");
		menu.style.setProperty("height", "70px");
        menu.style.setProperty("margin-top", "0px");
		menu.style.setProperty("background", "#ffffff");
        menu.style.setProperty("border-radius", "0px");
	  } else {
		menu.style.removeProperty("width");
		menu.style.removeProperty("height");
        menu.style.removeProperty("margin-top");
		menu.style.removeProperty("background");
		menu.style.removeProperty("border-radius", "10px");        
	  }
	});
</script>

```

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [January 23, 2025, 6:58pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/9 "2025-01-23T18:58:52Z")

</div>

No problem, you just need to set the menu in Elements to have 10px rounded borders also. Here’s how to do it…

---

<div class="post-metadata">

**Author:** ![D03ree](https://avatars.discourse-cdn.com/v4/letter/d/47e85d/32.png) [@D03ree](https://forums.realmacsoftware.com/u/D03ree)\
**Post date:** [March 10, 2026, 7:13pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/10 "2026-03-10T19:13:18Z")

</div>

@dan I want to emulate this “fancymenu”, and I’ve followed the tutorial. Copy/paste the html. But the width doesn’t change when I scroll. It all appears pretty straightforward. Not sure what I’m doing wrong… the menuID is set to fancymenu.

 ![Screenshot 2026-03-10 at 3.09.53 PM](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/6/0/604047259ada7fb69d8d806ca0fab16331f2cc4d.jpeg)

---

<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:** [March 10, 2026, 9:42pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/11 "2026-03-10T21:42:01Z")

</div>

Here is how I do this, it takes a combination of some code and the correct settings for the menu.

The screenshot shows the layout settings for the menu.

 ![CleanShot 2026-03-10 at 11.38.38@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/8/0845df6e72dd71da986ebffa5da9d333f1c6ab71.png)

Coupled with the following code.

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

```

With the ID for the menu set to `sticky-menu`.

NOTE: this version is using fully rounded corners, hence the calc() in the script.

---

<div class="post-metadata">

**Author:** ![D03ree](https://avatars.discourse-cdn.com/v4/letter/d/47e85d/32.png) [@D03ree](https://forums.realmacsoftware.com/u/D03ree)\
**Post date:** [March 11, 2026, 7:25pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/12 "2026-03-11T19:25:46Z")

</div>

Thank you! I used the code you’ve shared and love the rounded corners. For some reason it snaps back to squared edges even before the end of the page scroll… strange

---

<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:** [March 11, 2026, 7:38pm UTC](https://forums.realmacsoftware.com/t/tutorial-how-to-build-a-sticky-menu-part-2/46049/13 "2026-03-11T19:38:34Z")

</div>

Can you explain a little more, as I don’t understand the behavior you are seeing?

I have it set to make the switch after scrolling 200px, if you want to scroll further before it changes, just alter the number.