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):

Original Divi Slider dot navigationDivi slider with better contrast background for dot navigation
Default Divi Slider along with solution to increase contrast of dot nav

As you can see, it’s much easier to see the dots with the black background box!


Here’s the CSS to your child theme or directly in the customizer:

.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:

Divi slider with white background for dot navigation
Divi slider with white background for dot navigation

So, it should work for all of your Divi Slider slides!

Did it work for you? Please leave a comment or question below! – Brian

Please Leave a Question or Comment

Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments
%d bloggers like this: