How to Increase Contrast of the Divi Slider Nav Dots

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 (grab the center line and move it back and forth to see the difference):

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

Brian Shim

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.

brianshim.com