Create Better Divi Headers

Get Divi MadMenu
MenuMenu
Free Download

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

Default Dot Navigation Style

Dot Navigation Style #1

Dot Navigation Style #1

Dot Navigation Style #2

Dot Navigation Style #2

Dot Navigation Style #3

Dot Navigation Style #3

Dot Navigation Style #4

Dot Navigation Style #4

Dot Navigation Style #5

Dot Navigation Style #6

Dot Navigation Style #7

Dot Navigation Style #8

Dot Navigation Style #9

Dot Navigation Style #10

Dot Navigation Style #11

Dot Navigation Style #12

Dot Navigation Style #13

Dot Navigation Style #14

Dot Navigation Style #15

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.

39 Comments

  1. Nick Freund
    Nick Freund on January 16, 2023 at 8:07 pm

    Klasse Blog hier, vielen Dank für die Tipps. Nick

    Reply
  2. Jasper Lee
    Jasper Lee on January 15, 2022 at 11:03 am

    Is that possible to move dot navigation to left side of website?

    Reply
    • Ivan
      Ivan on January 17, 2022 at 3:06 pm

      Hi Jasper.

      Thanks for your question. Yes, you can do that easily using this simple CSS:

      /* Move Divi dot navigation to left */
      ul.et_pb_side_nav{
      right: auto;
      border-radius: 0 5px 5px 0;
      }

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

      Add it into the Divi -> Theme Options -> General -> General -> Custom CSS field.
      Hope this helps.

      Reply
  3. Maria
    Maria on March 18, 2018 at 6:32 pm

    Hello, How to hide the dot navigation before scroll in divi in CSS? Thanks!

    Reply
    • Ivan Chi
      Ivan Chi on March 18, 2018 at 8:57 pm

      Hi Maria.
      It cannot be done using CSS only, you’ll need JS for this. FYI, DotNav plugin has this feature, you can set the dot navigation to show after scroll and you can even set the scroll amount in pixels.

      Reply
  4. Elina
    Elina on November 23, 2017 at 1:54 pm

    How can we make the horizontal dots shift to vertical just for one slide.. like in this site (second section of the slider) (link removed)

    Reply
    • Ivan Chi
      Ivan Chi on November 23, 2017 at 2:45 pm

      Hi Elina.
      Please do not share links to sites having malware. I removed your link because my anti-virus program detected a trojan when I tried to visit that site.

      Reply
  5. John Frederick
    John Frederick on July 6, 2017 at 10:59 am

    I have upgraded to 1.1.2 of the plugin but am still not able to hide a section, using “chiddn_hide_section_dot” I am running Divi 3.0.60.
    Please advise.
    Thanks for the help
    John

    Reply
    • Ivan Chi
      Ivan Chi on July 6, 2017 at 2:51 pm

      Hi John.
      Please send your request to support email that you can find in the plugin documentation(readme.pdf file) including all details of your issue, I will reply asap. But before you do that make sure you select and save the “hide” option for the SHOW/HIDE SECTION DOTS setting in the DotNav plugin settings after you add the “chiddn_hide_section_dot” CSS class to the page section. Thanks.

      Reply
  6. Herchel
    Herchel on June 30, 2017 at 7:35 am

    Hi Ivan,
    Can you please have a look on my website directly because I’ve try all your code but no label again on all my Dot Navigation.
    So please write to me on my email and I’ll give an access to my website.
    Awaiting your feed back.

    Reply
  7. Herchel
    Herchel on June 23, 2017 at 7:19 am

    Hi Ivan,
    Even using postid-36 as number in my body, I don’t have the tooltip content on my dot navigation.
    Here are complete that I use:

    /* Floating Dot Navigation #10 */
    ul.et_pb_side_nav {
    top: 50%;
    right: 0.25%;
    width: auto;
    padding: 5px;
    -webkit-border-top-left-radius: 0px;
    -moz-border-radius-topleft: 0px;
    border-top-left-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    border-bottom-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -moz-border-radius-topright: 0px;
    border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomright: 0px;
    border-bottom-right-radius: 0px;
    opacity: 0;
    background: rgba(255,255,255,0);
    }
    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;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background-color: #7c7c7c);
    }
    ul.et_pb_side_nav.et-visible {
    opacity: 1;
    -webkit-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: fadeBottom 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -o-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;
    transition: background-color 0.6s ease;
    }

    *Dot Label*/
    ul.et_pb_side_nav .side_nav_item a {
    position: relative;
    }
    ul.et_pb_side_nav .side_nav_item a:before{
    position: absolute;
    display:none;
    font-family: inherit;
    font-size: 18px;
    opacity: 0;
    height: auto;
    border-radius: 5px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 1em;
    color: #fff;
    top: -15px;
    right: 25px;
    text-indent: 0;
    white-space: pre;
    }
    ul.et_pb_side_nav .side_nav_item a:hover:before{
    display: block;
    opacity: 1;
    -webkit-animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -moz-animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    -o-animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
    }
    /* use postid-xx class (e.g. .postid-35) or page-id-xxxxx class (e.g. .page-id-24700) for tooltip content */
    .postid-36 ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before{
    content: “Top video Terra”;
    }

    Please help.
    Regards

    Reply
    • Ivan Chi
      Ivan Chi on June 23, 2017 at 11:00 am

      I’ve spotted 3 mistakes in the CSS you provide above that are causing the issue.
      First of all, change the double quotes around the label text, they should be straight quotes (“dumb quotes”), not the once that you used. Simply type them manually after you paste this code into your child theme stylesheet or Divi Custom CSS field.
      Next, remove the closing paratheses after this color : background-color: #7c7c7c);.
      And, finally, you omitted a forward slash for CSS comment: *Dot Label*/ (it should be /*Dot Label*/ ).
      Now, considering that you used the right post id (.postid-36), the label should be displayed when hovering over the side navigation dot.

      Reply
  8. Herchel
    Herchel on June 22, 2017 at 4:21 am

    Hello Ivan,
    Thank you for your quick answer, it’s very appreciated.
    How to do if we are in long page?
    I can’t found post-id or page-id on this because we are in long page with a lot of sections.
    Please assist us.
    Regards

    Reply
    • Ivan Chi
      Ivan Chi on June 22, 2017 at 8:18 pm

      Hi Herchel.
      Use Google Chrome browser Dev Tools: right click anywhere on the page/post on which you want to show the dot nav labels, click the Inspect element and then look for this page/post id CSS class in the body tag.

      Reply
  9. Herchel
    Herchel on June 21, 2017 at 9:34 am

    Hi,
    How to show labal/text when the mouse is over the dot?
    I’ve try this code but no text appears

    /*Dot Text*/
    ul.et_pb_side_nav .side_nav_item a:before{
    font-size:15px;
    }
    ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before{
    color: #ffffff !important;
    content: “Top video Terra”;
    position: absolute !important;
    top: 0;
    }

    Reply
    • Ivan Chi
      Ivan Chi on June 21, 2017 at 4:13 pm

      Hi Herchel.
      Use this CSS snippet:
      ul.et_pb_side_nav .side_nav_item a {
      position: relative;
      }
      ul.et_pb_side_nav .side_nav_item a:before{
      position: absolute;
      display:none;
      font-family: inherit;
      font-size: 18px;
      opacity: 0;
      height: auto;
      border-radius: 5px;
      padding: 10px;
      background-color: rgba(0, 0, 0, 0.4);
      line-height: 1em;
      color: #fff;
      top: -15px;
      right: 25px;
      text-indent: 0;
      white-space: pre;
      }
      ul.et_pb_side_nav .side_nav_item a:hover:before{
      display: block;
      opacity: 1;
      -webkit-animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
      -moz-animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
      -o-animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
      animation: fadeLeft .5s 1 cubic-bezier(0.77, 0, 0.175, 1);
      }
      /* use postid-xx class (e.g. .postid-35) or page-id-xxxxx class (e.g. .page-id-24700) for tooltip content */
      .postid-35 ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before{
      content: "Top video Terra";
      }
      Since the side navigation item tooltip contents should be uniquie to every post/page, you have to target it by using the corresponding post/page id class for setting item tooltip contents, otherwise the same tooltip contents will show on every post/page where the side navigation is enabled.
      Hope this is helpful, if you have any question feel free to ask, I’ll be glad to help you.

      Reply
  10. Manoj M S
    Manoj M S on March 14, 2017 at 4:01 pm

    How to limit the number of dots in navigation?

    Reply
    • Ivan Chi
      Ivan Chi on March 14, 2017 at 5:30 pm

      Each dot represents a section of the page, if you want to have less number of dots in navigation then you’ll have to fit your page content in less number of sections.

      Reply
      • Peter Hjalmarsson
        Peter Hjalmarsson on May 10, 2017 at 8:33 am

        I’m kinda asking the same question again – I hope that is ok? ;-)

        I see what you’re saying about using less sections, but that’s not always possible. I’ve tried hiding (for example) side_nav_item_id_1 (to hide the second dot), bit it still leaves an empty slot that I can not get rid of. Any ideas?

        Reply
        • Ivan Chi
          Ivan Chi on May 10, 2017 at 11:06 am

          To hide e.g. the side nav dot with the side_nav_item_id_1 id you can use the following CSS code:

          .side_nav_item:nth-of-type(2){
          display: none;
          }

          OR

          .side_nav_item:nth-child(2){
          display: none;
          }

          Hope this is helpful.

          Reply
  11. Kimberly
    Kimberly on March 8, 2017 at 3:22 am

    How do you change the navigation dots from white to black depending on the background? If I have a white background it would be neat if they were black and if I had a dark background they could be white. Is that possible?

    Reply
    • Ivan Chi
      Ivan Chi on March 8, 2017 at 2:15 pm

      Hi Kimberly, thanks for asking.
      Use this CSS for changing the dot color:

      /* for normal state */
      ul.et_pb_side_nav .side_nav_item a {
      background-color: #ffffff !important; /* define dot color here */
      }
      /* for active and hover states */
      ul.et_pb_side_nav .side_nav_item a.active,
      ul.et_pb_side_nav .side_nav_item a:hover {
      background-color: #ffcc00 !important; /* define dot color here */
      }

      Hope this is helpful.

      Reply
  12. perdana
    perdana on December 7, 2016 at 7:55 am

    Hi Majid. Try this code:

    ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before {
    color: #ffffff !important;
    content: “Home”;
    position: absolute !important;
    top: 0;
    }

    this code not work, i wanna change the dot with image. is that possible?

    Reply
    • Ivan Chi
      Ivan Chi on December 7, 2016 at 5:17 pm

      Hi perdana, thanks for asking.

      Regarding the code not working, I could help you more if you provided me with the url.

      And yes, it is possible to use an image, try to do it using background-image: url("your-image-url-here"); and change the width and height of dot to match the image dimentions, like this:
      ul.et_pb_side_nav .side_nav_item a {
      background-image: url("your-image-url-here");
      width: 20px !important; /* your image width here */
      height: 20px !important; /* your image height here */
      }
      Hope this is helpful.

      Reply
  13. yul
    yul on October 25, 2016 at 8:44 am

    Hi,

    no. I add in section module settings/Custom CSS/CSS ID: 123. And want to show only fots where i add my css id and show this id.

    Reply
  14. yul
    yul on October 24, 2016 at 7:41 pm

    Hi nice work. But how show also div id (css id) like this beffasclubrepair.com

    Reply
    • Ivan Chi
      Ivan Chi on October 24, 2016 at 8:57 pm

      Hi yul.
      Do you mean the menu item names? They used the :before pseudo element for each dot and gave the content property the name of corresponding menu item. Like this:
      ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before{
      content: "Home";
      }
      ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1:before{
      content: "Pricing";
      }
      and so on…

      Reply
      • Majid
        Majid on November 20, 2016 at 2:34 pm

        Tried using the Pseudo. Did not work….

        Can you kindly share more information

        Reply
        • Ivan Chi
          Ivan Chi on November 20, 2016 at 4:29 pm

          Hi Majid. Try this code:

          ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before {
          color: #ffffff !important;
          content: "Home";
          position: absolute !important;
          top: 0;
          }

          Let me know if it works.

          Reply
          • Majid
            Majid on November 23, 2016 at 8:29 am

            Do i need to have the id for the section as i pasted the content. it did not work :(

          • Ivan Chi
            Ivan Chi on November 23, 2016 at 3:19 pm

            No, this is a simple CSS code and has nothing to do with the section id, using this code you are setting the dot navigation link text manually for each dot hence you need to use the item id for each dot (e.g. .side_nav_item_id_0). Can you share your url?

          • Ben
            Ben on February 1, 2017 at 8:03 pm

            Adding this also as addition will work:
            text-indent: 0px !important;

            Because one cannot see the text, because by default it hidden in Divi.

          • Stéphane
            Stéphane on June 8, 2017 at 2:26 pm

            Hi.
            Is this what seems to have been done on this website?
            http://www.3ejoueur.com/en/

            I would like to achieve the same effect.

          • Ivan Chi
            Ivan Chi on June 14, 2017 at 10:42 am

            That’s a really nice side nav effect on that site, thanks for sharing Stephane. Will look for ways to implement the same effect for Divi, hopefully soon.

  15. Mary
    Mary on October 22, 2016 at 10:09 am

    Very cool – thanks so much!

    Reply
    • Ivan Chi
      Ivan Chi on October 22, 2016 at 10:48 pm

      Glad you like it, Mary.

      Reply
  16. David
    David on October 19, 2016 at 8:52 pm

    Hey, great information. Thanks for posting. Do you have any solution for changing dots into numbers?

    Reply
    • Ivan Chi
      Ivan Chi on October 20, 2016 at 6:41 pm

      Hi David. Thanks for asking. Sure, you can display numbers instead of dots, it is quite simple to do. Use this CSS:
      ul.et_pb_side_nav .side_nav_item a {
      text-indent: 0px !important;
      }
      Hope this is helpful.

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

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.

Unsubscribe at any moment. No spam, ever!

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.

Unsubscribe at any moment. No spam, ever!

Get FREE Divi Layouts

Download 20+ Divi templates for FREE!

You have Successfully Subscribed! Please confirm your email address.

Unsubscribe at any moment. No spam, ever!

Black Friday Is Coming!

Subscribe to get notified when our BIGGEST SALE starts!

You have Successfully Subscribed! Please confirm your email address.

Unsubscribe at any moment. No spam, ever!

Cyber Monday Is Coming!

Subscribe to get notified when the SALE starts!

You have Successfully Subscribed! Please confirm your email address.

Unsubscribe at any moment. No spam, ever!