Streaming live at 10am (PST)

Compact version of nav bar on scroll

Hi, I have a pretty conventional nav bar across the top of all pages. When a user scrolls down the page a compact version of the nav bar is supposed to appear, and I wonder whether this can be done just with this one single nav bar instance.

The compact version of the nav bar is supposed to have:
• a different logo image
• fewer menu items
• a different background colour (although this is not a must)

How can this be achieved, and do I need to create another instance of nav bar?

Many thanks for any help!

1 Like

@spirelli My first thought is using a different element for trigger and using scroll into view and out of view.

Piter :webflow_heart:

Thank you for your reply, @PiterDimitrov. Animating this into view is documented on the Webflow help pages, for example. However, my question is whether it’s possible to also achieve the changes in look and content with a single instance of a Nav Bar element?