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:

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!

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:

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

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
Shares
%d bloggers like this: