The navigation dots at the bottom of a WordPress Divi Slider module can be hard to see, especially if you have a complex background image. In this solution, we’ll add a chunk of CSS to add a background box, of the appropriate color, to the dot navigation area of your Divi Slider for better contrast!
The Goal
Here’s the default Divi slider along with the proposed solution:


As you can see, it’s much easier to see the dots with the black background box!
The CSS
Here’s the CSS to your child theme or directly in the customizer:
/* BETTER CONTRAST FOR DIVI SLIDER NAV DOTS
https://brianshim.com/webtricks/divi-slider-nav-dots-contrast/
*/
.et_pb_slider .et-pb-controllers {
left: 50%;
transform: translateX(-50%);
width: auto;
text-align: center;
z-index: 10;
padding-top: 10px;
height: 28px;
padding: 10px 15px 0;
border-radius: 14px;
}
.et_pb_slider.et_pb_bg_layout_light .et-pb-controllers {
background-color: #fff;
}
.et_pb_slider.et_pb_bg_layout_dark .et-pb-controllers {
background-color: #000;
}
.et_pb_slider.et_pb_bg_layout_dark .et-pb-controllers a {
background-color: #fff;
}
The beauty of this is that it will add the appropriate background color based on your light/dark text setting in Design -> Text -> Text Color of the slide. If you set this to Dark, it will make the background box white, and vice-versa. Here’s an example showing the white background box with Text Color set to Dark:

So, it should work for all of your Divi Slider slides!
Did it work for you? Please leave a comment or question below! – Brian

I am a freelance web developer and consultant based in Santa Monica, CA who uses WordPress, PHP, and JavaScript to create websites and web applications for businesses, nonprofits, and organizations.
Please Leave a Question or Comment