Tutorial: How to Build a Sticky Menu - Part 2

Elements Tutorials
1

This is part 2 of our Sticky Menu Tutorial, you can watch part 1 here.

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.

1 Like
2

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

Menu
Menu1432Ă—159 101 KB

3

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?

4

I have sent you an email.

5

Got it, and fixed it!

I’ve emailed back the updated project :blush:

2 Likes
6

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

7

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

8

@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?

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

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

2 Likes
10

@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
Screenshot 2026-03-10 at 3.09.53 PM1862Ă—1564 549 KB

11

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
CleanShot 2026-03-10 at 11.38.38@2x650Ă—802 49.3 KB

Coupled with the following code.

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

1 Like
12

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

13

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.