Watch the following tutorial to see how to build a Sticky Menu, along with adding a drop shadow and frosted glass effect in RapidWeaver Elements.
Aloha Dan,
Can you please explain why you needed to put everything in a wrapper, that was not immediately clear from the demo.
Plus I would really like to know how to have a floating navbar that is offset from the edges of the screen until the content is scrolled up. Then it changes to fit the width of the page.
I have a working STICKY navbar on a couple of my sites but I did not use the same approach. Mine is offset from the sides and top, but it stays that way when the page is scrolled. I would like it to fit the page after being scrolled. My existing F3 sites have this feature, so I’m attempting to duplicate that effect.
I’m curious to see if there is a better solution than the one I came up with for my sites.
ive got a sticky menu and its not in a wrapper
The Menu needs something to stick to, this is how it would actually work if you were writing the HTML.
It’s easy to offset it from the edges of the page using the spacing controls on the menu. Getting the menu to change width would require some javascript/AplineJS, it’s not something we’ve built in, but is totally doable…
Well done, and that’s the thing with the way we’ve written the Components, they are very low-level so there are endless ways to build things!
Perhaps you could share your solution here for others to see 
its all the same as you did in the video regarding set up just not in a container or anything only my z index is 49 not 100 turned to global and put on every page…see in action here
(https://morris56.uk)
ps gallery still working after altering the Mac setting
1 Like
Interesting as I have a STICKY navbar that is not in a wrapper and it works perfectly. The only thing I noticed that does not work with it setup my way as opposed to yours. If you give it a shadow you will not see the shadow unless you drop it in a wrapper. Other than that it works perfectly, except I cannot get it to natively grow to fit the page once scrolled. I’m not about to attempt some Javascript to make to happen.
Okay, so as you both pointed out it does work without the wrapper container… but the wrapper is useful if you want to control how long the menu stays on screen for 
Correct!
Although it does seem the wrapper complicates things if you want to have the navbar as a global, as you then have to add a wrapper to every page where you want the navbar. Then you have the navbar as a global within the wrapper. I suppose the wrapper could be a global but then you have to customize it for every page.
I’ve just been playing around to see if I can get the menu to change size on scroll, and the good news is, it’s not too difficult…
I used the following Javascript to add and remove Tailwind classes on the Menu component when the page is scrolled. I added a custom ID to my menu component called “fancymenu”.
<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>
Here’s a quick demo video showing how it works. You’ll need to set up the values on the menu the same as in the Javascript. I have the following values set - Width= 1000px and top margin = 10.
If you share your project with me I can set this up for you.
Perhaps I should do this as a proper follow-up tutorial 
That would be awesome.
This looks good I’m about to start implementing this, if I run into any problems I’ll be in touch. Great stuff.
Awesome! I’ll do a follow-up tutorial tomorrow (Thursday), that shows exactly how to get the menu to change size on scroll 
That would be great as I’m not getting it to work at the moment, but I’ll keep plugging away at it.
Oops! I just realized that one of the sites where I thought I was using a STICKY navbar, I was actually using a FIXED one. This explains why the wrapper makes so much sense. If you DON’T have the menu in a wrapper and you set it to STICKY it gets placed on a WHITE background at the top of the page. The wrapper would fix this. Must be the reason I used FIXED as I wanted the menu to be above the page background.
Testing this shows that the wrapper DOES NOT fix the white background issue.
Please make the demo project available so we can study it in depth.
1 Like
@handshaper Part 2 of the Sticky menu tutorial is now online…
There’s a also a link to the demo project with the completed menu 
Have fun!
@dan first of all THANKS for your prompt response to my request, I have been using the Beta for two days only and to see not one but two tutorials based on my question is beyond my expectations. I have set up my Menu and even added sub menus today in my play project. I have even worked out how to do a sticky top menu and have that disappear and a new sticky menu to appear half way down my page, if ever i need this all from your tutorial part one. I am confident with my menus now and wills start footers tomorrow. I feel the body is variant on the project I am doing so once I have a global header and footer I will then be happy to start playing around with different body designs to meet my needs to replace my sites once able and ready to. Once again THANKS and thanks to everyone else input too.
1 Like
You’re welcome, that’s awesome to hear!
1 Like
This was really informative. I have used this to make this functional in my sites. Although I took a different approach that allowed me to forego using a wrapper. I started with a FIXED menu and then changed it on SCROLL. Plus I used the INSET property to add space around the menu when FIXED.
I did this because I found it disconcerting that when you set the menu to STICKY it added a WHITE background behind the menu. I could not see a reason for this change, although it did explain why you were probably using a wrapper.
This allowed me to only have two lines of code as changing the INSET meant I could leave the width on AUTO as the inset was being applied as UNIFORM.
<script>
const menu = document.getElementById('fancymenu');
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", "20px");
}
});
</script>
Does this approach make sense?
Now I want to try and do this with the Tailwind classes.
It constabtly amazes me how flexible Elements really is, the fact that there are invariably more than one way to accomplish something is very inspiring.
1 Like
Yup, that makes perfect sense.
If you get stuck, just let me know and I can help you out
Good luck!
I’m trying to do this with Tailwind, but I’m having a hard time figuring out which class to use to set the INSET, any ideas?
inset is just shorthand for setting the top, right, bottom, and left css properties.
Tailwind has a inset-x-{value} utility that will set the left and right css properties in one class. In this instance you’ll also likely want to use the top-{value} utility class as well.
Check the tailwind docs for more info Top / Right / Bottom / Left - Tailwind CSS
Hope that helps 
1 Like