To customize the dots in the Webflow slides nav, you can apply custom CSS to target and style them. There are two main approaches you can take to achieve this: using CSS or uploaded SVG icons. I'll provide examples for both options below.
Using CSS:
1. Add a custom CSS class to the Slide Nav element by selecting it and going to the "Settings" panel on the right. Let's call it ".custom-nav".
2. Open the Custom Code panel by clicking on the </> icon in the Designer.
3. Add the following code to target and style the dots:
```
.custom-nav .w-slider-dot {
/* dot styling properties */
}
.custom-nav .w-active {
/* active dot styling properties */
}
```
4. Replace the "dot styling properties" and "active dot styling properties" with your desired CSS rules, such as color, size, background, borders, etc.
Using uploaded SVG icons:
1. Upload your custom SVG icon(s) to Webflow by going to the Assets panel and clicking on the "Upload" button.
2. Add a custom CSS class to the Slide Nav element (similar to the CSS approach) and let's call it ".custom-nav".
3. Open the Custom Code panel.
4. Add the following code to target and replace the dots with your uploaded SVG icons:
```
.custom-nav .w-slider-dot {
display: none;
}
.custom-nav .w-slider-dot:before {
content: url('URL_OF_YOUR_UPLOADED_SVG_ICON');
/* SVG icon styling properties */
}
.custom-nav .w-active:before {
/* active SVG icon styling properties */
}
```
5. Replace "URL_OF_YOUR_UPLOADED_SVG_ICON" with the URL of the SVG image you uploaded in step 1.
6. Also, replace the "SVG icon styling properties" and "active SVG icon styling properties" with the desired CSS rules for your SVG icons, such as width, height, fill color, etc.
Remember to replace ".custom-nav" with the actual custom CSS class you added to the Slide Nav element.
By following these steps and customizing the provided code, you'll be able to style the dots in the Webflow slides nav to match your specific design using CSS or uploaded SVG icons.