Creating a radio button-like sidebar

Hello ! Anyone know how one might go about creating a radio-button-esque page advancement bar like the one in this figma prototype that I made ? (you can advance by clicking on the right arrow)

I’ve never been at ease using custom code to insert CSS shapes in webflow…that would probably have been my first instinct as a solution (CSS circles that could fill and un-fill as you scroll between sections, in this case) – maybe that’s a solution that exists ?

my project as it exists currently is here – very little work has been done so far !

Thanks :upside_down_face:

hi @madeleine and welcome. Here is simple EXAMPLE how to achieve similar design with Webflow slider. There will be need to use JS for menu.

LIVE

1 Like

@Stan thank you for the welcome, and your example looks exactly like what I’m looking to do ! I was able to access it this morning but right now it’s no longer working…could you try re-linking it ? :pray:

Hi @madeleine, sorry, I have maybe move it as this project is for a small tests and I’m moving things that are done (pages) into folder.

here we GO

If this solved your question please feel free to check any response as solution to be this treat marked as solved

thanks for putting it back up !! did you use JS for the nav-dots ? I tried inserting your bit of custom CSS but i’m still not getting the result I want. Any suggestions ? read-only link here

Not JS implemented, it is plain Webflow slider with a few lines of CSS. Just copy my section element and paste it into your project to be able to play with that. On Mac command + C command + V - on Windows it should be CTRL but I’m not sure.

unfortunately you can’t copy on webflow when it’s in read-only mode :confused: but i think i managed to replicate your idea !! thanks so much :slight_smile:

Any idea what the JS (or CSS, not sure which is more applicable) might be to make the body background change color only when Slide 2 is active ? (i.e. the body background is F6F6FA when slide 1, or slide 3, or slide 4 is active, whereas it becomes a linear gradient of 4B00EC and 027EFB when slide 2 is active ? like in the prototype)

THANK YOU again for your help :sunflower:

why you just don’t simply change slide background color?