Create Better Divi Headers

15 Dot Navigation Styles for Divi Single Page Sites

by | Aug 18, 2016 | 39 comments

Update(27.06.2017): I have released the DotNav plugin which lets you do all the custom stylings suggested in this post and much more quickly and easely without having to deal with code. The DotNav plugin for Divi enhances the Dot Navigation by adding lots of new features to it, with this plugin you can do all customizations with live preview in Theme Customizer interface. Learn more here.

In this post I am going to share some nice custom styles for the Divi Dot Navigation. That is because I have noticed that most people that use Divi theme never change the default style of Dot Navigation and use it as it is. The default style is nice but it may become boring when everybody uses the same thing.

So, I decided to prepare some custom styles for Dot Navigation and share them with people. Below you can find 15 different custom styles and CSS snippets for each of them. All you need to do is to grab the CSS code and paste it into Divi -> Theme Options -> General -> Custom CSS or into your child theme style.css file. Enjoy!

Dot Navigation Custom Styles

Dot Navigation Custom Styles CSS Snippets

Dot Navigation Style #1

Your Subtitle Goes Here
/*** Dot Navigation Style #1 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 5px;
    border: 2px solid #9b59b6;
    border-radius: 0px;
    background: rgba(220,198,224,0.75);
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.4);
    box-shadow: 0 0 8px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 7px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 12px;
    height: 25px;
    margin-right: 0px;
    border-radius: 50px;
    background-color: rgba(155,89,182,0.46);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: #9b59b6 !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #1 ***/

Dot Navigation Style #2

Your Subtitle Goes Here
/*** Dot Navigation Style #2 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 5px;
    border-radius: 9px;
    background: #4aa3df;
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 7px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 10px;
    height: 10px;
    margin-right: 0px;
    border-radius: 50px;
    background-color: rgba(255,255,255,0.46);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: flipInX 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: flipInX 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: #ffffff !important;
    -webkit-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
    -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s linear;
    -o-transition: background-color 0.3s ease, transform 0.3s linear;
}
/*** END Dot Navigation Style #2 ***/

Dot Navigation Style #3

Your Subtitle Goes Here
/*** Dot Navigation Style #3 ***/
ul.et_pb_side_nav {
    width: auto;
    padding: 5px;
    border-radius: 50px 50px 0;
    background: rgba(74,163,223,0.56);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 1px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 15px;
    height: 15px;
    margin-right: 0px;
    border-radius: 50px;
    background-color: rgba(255,255,255,0.46);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeRight 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: #ffffff !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #3 ***/

Dot Navigation Style #4

Your Subtitle Goes Here
/*** Dot Navigation Style #4 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 5px;
    border-radius: 0px;
    background: #40d47e;
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 1px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 15px;
    height: 15px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.46);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: #ffffff !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #4 ***/

Dot Navigation Style #5

Your Subtitle Goes Here
/*** Dot Navigation Style #5 ***/
ul.et_pb_side_nav {
    width: auto;
    padding: 5px;
    border: 1px solid #ffffff;
    border-radius: 0px;
    background: #354b60;
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 5px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 15px;
    height: 15px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.44);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: flipInY 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0) !important;
    border: 1px solid #ffffff;
    -webkit-transition: background-color 0.6s ease, border-color 0.6s linear;
    -o-transition: background-color 0.6s ease, border-color 0.6s linear;
    transition: background-color 0.6s ease, border-color 0.6s linear;
}
/*** END Dot Navigation Style #5 ***/

Dot Navigation Style #6

Your Subtitle Goes Here
/*** Dot Navigation Style #6 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 0px;
    border-radius: 0px;
    background: rgba(29,210,175,0.88);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 11px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 10px;
    height: 10px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: #ea6153;
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeInTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeInTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: #ffffff !important;
}
/*** END Dot Navigation Style #6 ***/

Dot Navigation Style #7

Your Subtitle Goes Here
/*** Dot Navigation Style #7 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 0px;
    border-radius: 0px;
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 0px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 20px;
    height: 20px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.51);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeInLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeInLeft 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0.84) !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #7 ***/

Dot Navigation Style #8

Your Subtitle Goes Here
/*** Dot Navigation Style #8 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 0px;
    border-radius: 0px;
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 0px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 10px;
    height: 35px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: rgba(224,103,105,0.73);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeInBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeInBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0.94) !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #8 ***/

Dot Navigation Style #9

Your Subtitle Goes Here
/*** Dot Navigation Style #9 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 5px;
    border-radius: 10px;
    background: rgba(0,0,0,0.2);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 10px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 8px;
    height: 8px;
    margin-right: 0px;
    border-radius: 50px;
    background-color: rgba(255,255,255,0.29);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0.94) !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #9 ***/

Dot Navigation Style #10

Your Subtitle Goes Here
/*** Dot Navigation Style #10 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 5px;
    border-radius: 0px;
    background: rgba(241,169,160,0.7);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 10px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 15px;
    height: 15px;
    margin-right: 0px;
    border-radius: 50px;
    background-color: rgba(255,255,255,0.29);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0.29) !important;
    border: 2px solid #76f771;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #10 ***/

Dot Navigation Style #11

Your Subtitle Goes Here
/*** Dot Navigation Style #11 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 3px;
    border: 2px solid #f9690e;
    border-radius: 0px;
    background: rgba(249,105,14,0.38);
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.4);
    box-shadow: 0 0 8px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 3px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 25px;
    height: 25px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: rgba(249,105,14,0.46);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: #f9690e !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #11 ***/

Dot Navigation Style #12

Your Subtitle Goes Here
/*** Dot Navigation Style #12 ***/
ul.et_pb_side_nav {
    right: 0.25%;
    width: auto;
    padding: 0px;
    border-radius: 0px;
    background: rgba(103,65,114,0.45);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 20px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 7px;
    height: 7px;
    margin-right: 0px;
    border-radius: 50px;
    background-color: rgba(103,65,114,0.83);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeTop 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0.71) !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #12 ***/

Dot Navigation Style #13

Your Subtitle Goes Here
/*** Dot Navigation Style #13 ***/
ul.et_pb_side_nav {
    right: 0.5%;
    width: auto;
    padding: 0px;
    border-radius: 4px;
    background: rgba(0,0,0,0);
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
    box-shadow: 0 0 5px rgba(0,0,0,.4);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 10px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 12px;
    height: 12px;
    margin-right: 0px;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.4);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0.9) !important;
    -webkit-transition: background-color 0.6s ease;
    -o-transition: background-color 0.6s ease;
    transition: background-color 0.6s ease;
}
/*** END Dot Navigation Style #13 ***/

Dot Navigation Style #14

Your Subtitle Goes Here
/*** Dot Navigation Style #14 ***/
ul.et_pb_side_nav {
    right: 0.5%;
    width: auto;
    padding: 0px;
    border-radius: 0px;
    background: rgba(0,0,0,0);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 1px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 25px;
    height: 25px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.44);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: rgba(255,255,255,0.85) !important;
}
/*** END Dot Navigation Style #14 ***/

Dot Navigation Style #15

Your Subtitle Goes Here
/*** Dot Navigation Style #15 ***/
ul.et_pb_side_nav {
    right: 0.5%;
    width: auto;
    padding: 0px;
    border-radius: 0px;
    background: rgba(0,0,0,0);
}

ul.et_pb_side_nav li.side_nav_item {
    padding: 11px;
}

ul.et_pb_side_nav .side_nav_item a {
    width: 10px;
    height: 10px;
    margin-right: 0px;
    border-radius: 0px;
    background-color: rgba(255,255,255,0.44);
}

ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeIn 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

ul.et_pb_side_nav .side_nav_item a.active,
ul.et_pb_side_nav .side_nav_item a:hover {
    background-color: #f9831b !important;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: -webkit-transform 0.3s ease;
    -o-transition: transform 0.3s ease;
    transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
/*** Dot Navigation Style #15 ***/

Hope these CSS snippets will come in handy. Feel free to share your thoughts and suggestions in the comments section below and don’t forget to share this post with your friends.

Subscribe To Our Newsletter

Join our mailing list to download Divi freebies and get notified of our discounts, latest news and updates.

You have Successfully Subscribed! Please confirm your email address.

Divi MadMenu Coming Soon!

Join our mailing list to get notified when the Divi MadMenu module is released! Check out the sneak peek...

You have Successfully Subscribed! Please confirm your email address.

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

Please confirm your email address to complete your subscription. Thank you!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

Please confirm your email address to complete your subscription. Thank you!