Streaming live at 10am (PST)

Vertical interactive "nav bar"


#1

Hi there!

I’m thinking to add a vertical interactive nav bar on the right side of my content to help the readers to keep track of where they are in the content. I want the nav bar to appear once they scroll to a specific place (in this case, “detailed process”), and the nav bar should highlight where the reader is regarding to the content to the left. It should also be clickable and will take the readers to where they want to be regarding the content on the left.

My question is, how exactly should I build this in webflow? I guess I would need absolute positioning, and scroll effect, as well as anchor point. But I am not sure how to exactly set all these things up! Some google search didn’t yield satisfactory results either.

Webflow is such a great tool! Thanks for your help!

LINK: https://preview.webflow.com/preview/jason-chens-marvelous-project?preview=b35e364ae2379ebef6bfb9854dec1159


#2

You need a secondary navbar, because nvbar elements behave the way you’re describing your block of links.

Drag a second navbar and make it look like you want the block to look like.
Use an interaction (scroll trigger) to make the navbar only appear when you’ve decided it to.
Inside the navebar/sidebar, set the links to unique IDs of your in-page sections.
Style the “Curent” state of link (Current class appears when target section is on screen)


#3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.