Just incase you’re not aware, you’ll also want to set this manually in the Menu Settings, it’s under “Type”.
@ben I do wonder if we should change that “Type” title to “Inset” 
1 Like
That’s really nice. After some try and error I made it work using this JS code and simply increased the top padding of the header element to make room for the fixed menu.
elementsapp://downloadDocument/mArLIqABYC1h
<script>
const menu = document.getElementById('fancymenu');
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
menu.style.setProperty("border-radius", "0px");
menu.style.setProperty("height", "80px");
menu.style.setProperty("width", "100vw");
menu.style.setProperty("top", "0");
menu.style.setProperty("left", "0");
} else {
menu.style.setProperty("border-radius", "20px");
menu.style.setProperty("height", "150px");
menu.style.setProperty("width", "80%");
menu.style.setProperty("top", "30px");
menu.style.setProperty("left", "10%");
}
});
</script>
Definitely going to save this for future usage 
Aloha dan,
Yes, I do have the INSET setup as shown below.
I have to agree the name TYPE is confusing.
I have tried the Tailwind classes but I cannot get it to work. Must be doing something wrong.
This is the code I was trying to use.
<script>
const menu = document.getElementById('sticky-menu');
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
menu.classList.remove('inset-2', 'rounded-xl');
} else {
menu.classList.add('inset-2', 'rounded-xl');
}
});
</script>
It’s a bit trickier with the Tailwind classes as you need to remove the classes you no longer need and add the new ones each time. Notice how in my code I have an add and remove line in the if and else statements.
<script>
const menu = document.getElementById('fancymenu');
window.addEventListener('scroll', () => {
if (window.scrollY > 500) {
menu.classList.add('w-auto');
menu.classList.remove('w-[1000px]', 'mt-10');
} else {
menu.classList.add('w-[1000px]', 'mt-10');
menu.classList.remove('w-auto');
}
});
</script>
If you send me your project, I can fix it up for you!
Apart from what @dan wrote (adding and removing classes), you don’t use the theme settings for the inset in the properties panel.
I got mine working using the tailwind classes and I believe I have it set up correctly. However it still shows the borders on the menu when scrolling down.
elementsapp://downloadDocument/mJhyG6hl2iJG
<script>
const menu = document.getElementById('mainMenu');
window.addEventListener('scroll', () => {
if (window.scrollY > 150) {
menu.style.setProperty('height', '80px');
menu.style.setProperty('width', '100vw');
menu.classList.remove('inset-5', 'rounded-xl');
menu.classList.add('inset-0', 'rounded-none');
} else {
menu.style.setProperty('height', '150px');
menu.style.setProperty('width', '80%');
menu.classList.remove('inset-0', 'rounded-none');
menu.classList.add('inset-5', 'rounded-xl');
}
});
</script>
Yes, my version using the straight CSS approach like yours works just fine. It is the Tailwind version that is not working.
Using your approach I got it to work, except it never changes the radius on the corners for some reason. I don’t mess with the height and width as I just depend on the inset to get me what I want. I leave the size on AUTO.
I noticed yours does NOT change the radius either when the men grows to full size. Need to figure out why that is not working.
Yes, I’m doing that here is the code I’m using, it works except the corner radius does not change. I used some of the code @pumpkin kindly provided.
<script>
const menu = document.getElementById('sticky-menu');
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
menu.classList.remove('inset-2', 'rounded-xl');
menu.classList.add('inset-0', 'rounded-none');
} else {
menu.classList.remove('inset-0', 'rounded-none');
menu.classList.add('inset-2', 'rounded-xl');
}
});
</script>
Maybe a bug? @dan ?
Hey @handshaper,
Have had a look at this and got it working by using the individual rounded classes for each corner (as that’s how we set it in code).
<script>
const menu = document.getElementById('fancymenu');
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
menu.classList.remove('inset-6', 'rounded-bl-xl','rounded-br-xl');
menu.classList.add('inset-0', 'rounded-none');
} else {
menu.classList.remove('inset-0', 'rounded-none');
menu.classList.add('inset-6', 'rounded-bl-xl', 'rounded-br-xl');
}
});
</script>
Here’s a quick video showing how to make those changes.
Let me know if you get stuck, or need any more help on this 
1 Like
Thanks @dan. That worked. Makes absolutely sense. After all you set the border radius separately for each corner in the properties panel.
1 Like
Finally, got it to work. It is interesting that in order for something like this to work you need to understand exactly how the various classes were setup initially in order to be able to remove them.
Here is my final code that works for the way I have it setup. I needed to explicitly handle every one of the corners.
<script>
const menu = document.getElementById('sticky-menu');
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
menu.classList.remove('inset-[1rem]', 'rounded-bl-xl','rounded-tl-xl','rounded-tr-xl','rounded-br-xl');
menu.classList.add('inset-0', 'rounded-none');
} else {
menu.classList.remove('inset-0', 'rounded-none');
menu.classList.add('inset-[1rem]', 'rounded-bl-xl','rounded-tl-xl','rounded-tr-xl','rounded-br-xl');
}
});
</script>
Seems like this is a lot easier to do with straight CSS as it does not care how you initially had it setup as you are not dealing directly with the Tailwind classes.
2 Likes
Yeah, seems JS is a tad more nitpicky 
So, I recreated the menu and it works. Mostly. Even though I set the transitions for the menu to all, ease-in-out, 400 ms, the changes appear instantly.
Can you please test this and tell me if that happens to you too? Or is it just for me again?
Yes, the same thing happens for me there is no smooth transition it is instant.
At one point I did a Background color change on hover. Then the transition suddenly worked. But after removing the hover it didn’t. And it stayed that way even after redoing the hover effect.
Meh. I‘ll try to create an entirely new project and see if that helps. It‘s a Beta After all.
Hey @pumpkin and @handshaper,
The animation is not happening because the component is missing the Tailwind transition classes.
If you’ve not got any hover effects on your menu, you’ll need to put in something like the following into the Advanced > CSS Classes field.
transition-all duration-[300ms] delay-[0ms] ease-in-out
Important: However, It appears there’s a bug we need to fix as custom classes are not being applied to the Menu.
So, in the meantime the easiest way to get it working is to set “Static” and “Hover” values under Effects as this will add the transition classes for you. This is just a workaround until the custom classes feature is working in the Menu (hopefully in the next beta).
Let me know how you get on and if you have any more questions.
I already had the transition enabled in the properties panel, but it didn’t work.
Adding a simple box-shadow that changes on hover got me the transition effect eventually. Maybe I had that enabled in the last menu that bugged out on me. Not sure.
Thanks for clarifying @dan.
Ah great, you can set it to the same value if you don’t want the shadow to change.