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:

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