Is it possible to change the color of the 'slider-nav-circles' in Webflow before export?
TL;DR
- Select the Slider Nav and individual nav dots in Webflow’s Navigator.
- Use combo classes to style default and active states via the Style panel, then preview and export with changes preserved.
Yes, you can change the color of the slider navigation circles (also called slider nav dots) in Webflow before export using the built-in Designer tools.
1. Access the Slider Component
- Click on the Slider element in your Webflow project.
- In the Navigator, locate and select the Slider Nav (often named
Slider Navorslider-nav-circles).
2. Select a Nav Dot
- Within the Slider Nav, select one of the navigation dots—these are typically named
Slide Nav Linkor similar inside the nav container. - If you can’t click them directly, you can use the Navigator panel to locate and select a dot element.
3. Apply Styling Using Combo Class
- By default, all nav links/dots share the same class.
- Add a Combo Class (e.g.,
slider-dottoslider-dot.active) to target either the normal state or the current (active) state. - With the nav dot selected, go to the Style panel and change the:
- Background color for the inactive state.
- Background color (or other styles) for the current state (represents the active slide).
4. Preview and Confirm Styling
- Use Preview Mode to see how the dots appear across different slides.
- Ensure both default and active styles are visibly different if needed.
5. Export the Updated Design
- Once styling is complete, you can safely export the clean HTML/CSS and the color adjustments will be preserved in the style sheet or inline classes.
Summary
You can change the slider navigation circle colors directly in Webflow before export via the Style panel by editing the Slider Nav and its child elements using combo classes for default and active states.