We've implemented a simple CSS solution to modify the color of the navigation dots in the slider component. This approach allows easy customization while maintaining consistency with your overall design theme.

Implementation

1. Locate the custom code section in your Webflow project settings.

   

2. Find the CSS snippet shown above.

   /* Slider navigation background color */
   .w-slider-nav-invert > div {
     background-color: **var(--neutral-colors--300)** !important;
   }
   
   /* Active state background color for slider navigation */
   .w-slider-nav-invert > div.w-active {
     background-color: **var(--primary-colors--100)** !important;
   }
   

3. Modify the color values as needed:

   • Change the Webflow variable names to use different predefined colors.
   • Or replace the entire var(...) statement with a HEX color code.

Customization options

1. Using Webflow variables (recommended):
   • Simply update the corresponding color variables in Webflow's design settings.
   • This method ensures consistency across your site.
2. Using custom colors:
   • Replace the variable references with specific HEX color codes.
   • Example: background-color: #FFAA00 !important;

Previous

<aside> 📐 Mega menu cropping

</aside>

Next

<aside> ▶️ Marquee sliders

</aside>