39 Comments

1. 

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

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

   Reply
2. 

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

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

   Reply
   • 

     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 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 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 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 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 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 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 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
   • 

     Ivan Chi on June 30, 2017 at 10:13 am

     Hi Herchel,
     I’ve sent you an email. FYI, I’ve released the DotNav plugin recently, read this post for more details: New Product Release – DotNav Plugin Enhancing the Dot Navigation of Divi Theme, among all other features it also provides a feature to display section labels for Dot Navigation dots. You might find it useful.

     Reply
7. 

   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 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 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 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 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 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 on March 14, 2017 at 4:01 pm

    How to limit the number of dots in navigation?

    Reply
    • 

      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 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 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 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 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 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 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 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 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 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 on November 20, 2016 at 2:34 pm

        Tried using the Pseudo. Did not work….

        Can you kindly share more information

        Reply
        • 

          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 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 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 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 on June 8, 2017 at 2:26 pm

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

            I would like to achieve the same effect.

          • 

            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 on October 22, 2016 at 10:09 am

    Very cool – thanks so much!

    Reply
    • 

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

      Glad you like it, Mary.

      Reply
16. 

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