Sticky nav bar help

Hi,

I’m learning how to use webflow, so I got a free theme to test some things out.

I wanted to make a sticky nav bar and I used a webflow tutorial video, that said to change the position, change the top distance to 0 and put a bug z-index number. All check but still it isn’t sticky to the end of the page, only to the first image. What am I doing wrong?

The second thing I that I want the nav bar overlap the first section of the page, since I changed the position it goes up. I need to add a negative margin to make that happen? Generally this is not the best way to do it.

Finally but not least I want to change from transparent to a colored back ground when scrolled down. I usually do it by using a JS code, is there any other way?

Thanks for the help and support (:


Here is my public share link: https://preview.webflow.com/preview/slt-0a8641-a1da25b266f466bab3b8bc691ee6?utm_medium=preview_link&utm_source=designer&utm_content=slt-0a8641-a1da25b266f466bab3b8bc691ee6&preview=939b80fc49f123a33f826f53db690ba8&mode=preview

Hi @vitormfs, welcome! :wave:

I think what you’re actually looking for with the nav is position: fixed. That way it stays in that position on the whole page. Sticky is just meant to stay on the page within the parent element, then it moves on, if that makes sense.

For the background, you just add a scroll interaction. Here is a good starting point for learning about interactions on Webflow:

Hope that helps :slight_smile:

@vitormfs were you able to figure it out? Let us know if you need any more help :slight_smile: