Join the Webstudio community

Updated last month

Sticky Navbar Woes: Troubleshooting Desktop Scrolling Issues

At a glance

The community member is trying to make their navbar stick to the top of the page when scrolled on desktop. They have tried setting the "sticky" property in the Position but it is not working. The comments suggest setting the "top" property to 0 to make the navbar stick. One community member confirms this fixes the issue. However, there is no easy way to set a transparent background for the navbar that changes color on scroll, which is another common use case. The community members discuss potential solutions and challenges around sticky positioning and related CSS features.

Hi. I'm trying to get my navbar to be stick when the page is scrolled (Desktop). I've tried enabling its sticky property in Position but is refuses to stick. What else do I need to do please?
Attachment
sticky.png
1
B
s
J
11 comments
@Oleg Isonen maybe set it automatically as most popular case?
Hi @Bogdan - do you mean set the Z Index to 0 ?
No, I mean set "Top" to 0
Aha! The label ("Top") only revealed itself when I clicked into the box. ๐Ÿ™‚

Many thanks - that's done the trick.

I guess we don't currently have any easy way to set a transparent background [for a nav] which changes colour on scroll? Another fairly common case.

Thanks again for your help.
There is no an easy way. Css will get "stuck" query soon though
I agree from a UX perspective
We can't, because user might decide to switch back t something else and you get the top value still there, what we can do is add a hint in the description and even an additional warning there when sticky is used without any positinal value
Attachment
image.png
IIRC webflow has a notice. Though whats the harm in having zero persist after changing?
Also we had this idea of commands for things like this:

ellipsis, sticky, background overlay etc
kinda a sideeffect, you change one property and something unrelated changes
Add a reply
Sign up and join the conversation on Discord