Join the Webstudio community

Updated 3 weeks ago

Sticky Navbar Woes: Troubleshooting Desktop Scrolling Issues

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