Streaming live at 10am (PST)

Tab-like section with progress bar and sticky navigation

Hi,

I want to make the following layout in my Webflow site.

The idea is to show features of a product on the same screen with multiple steps. Each step have its own header, text and image. I want the users to scroll to change steps but also give them the possibility to switch back to a chosen step by click to the step name. When a step is active, the text switches to black, the green dot is surrounded with another dot and of course, content us changing.

Looks simple but can’t see a simple way to do this. I assume it’s going to be some sort of mix between a progress bar and a sticky navigation.

I know how to make a progress bar, a sticky navigation but can’t see how to make it without having the “screen” actually scrolling. It usually uses sections and “page scroll” event to perform but in my case, I don’t want the page to scroll until the steps are all shown.

I could use a tab element and tweak the buttons to make the trick but that would not allow the user to scroll to switch steps since tabs are only triggered by a click on the dedicated button.

I would really appreciate some help to understand the building process required for this layout.

Any idea Webflow developers ?

Hi, not sure if this is what you are looking for, but I created a section in the home page called “Nuestro Proceso” I kinda created a progress bar, take a look

https://preview.webflow.com/preview/briva?utm_medium=preview_link&utm_source=designer&utm_content=briva&preview=12afa67985068a752f2924d17caa1a13&mode=preview