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.