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