The Divi dot navigation is a floating navigation bar with anchor links. You can use the dot navigation bar to easily scroll down to certain sections of your page. This is a nice feature for long pages.
In this tutorial I will be covering the following:
- How to enable the Divi dot navigation bar
- How to customize the Divi dot navigation bar
- How to exclude a section from the navigation bar
- How to create a navigation bar with labels
Each dot in the floating navigation bar stands for a section on your page.
In the example above you can see on the right how the dot navigation looks when you enable it. In my example, I have 9 sections so I will get 9 dots. When I click on a dot it will bring me to that section of the page.
How To Enable The Divi Dot Navigation
Open the page for which you want to enable the dot navigation. In the right column open the Divi Page Settings tab by clicking on the little arrow. Under Dot Navigation you can enable this. Under hiding Nav Before Scroll, you can turn on or off the dot navigation before you start scrolling.
How To Style The Divi Dot Navigation Bar
By default, there are no customization options for the dot navigation bar. So we have to use some CSS code to style it. You can use the below snippet for changing the:
- Dot navigation background-color
- Active dot color
- Inactive dot color
Place the following CSS snippet in Divi > Theme Options > CSS:
/* Background color bar */
ul.et_pb_side_nav {
background: #da181f;
}
/* Active dot color */
ul.et_pb_side_nav .side_nav_item a.active {
background-color: #000000!important;
}
/* Inactive dot color */
ul.et_pb_side_nav .side_nav_item a {
background-color: #e4e4e4;
}You can change the color codes for your design.
How To Exclude A Section From The Navigation Bar
Sections are automatically added to the dot navigation bar. If you want to exclude some sections from the navigation bar you can use the following snippets:
If you want to remove the first dot from the navigation use this:
/* Exclude a section from the navigation bar */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0 {
display: none !important;
}Each dot has its unique ID number starting with 0. In the above snippet, you see id_0 in the CSS code. This is the first dot.
If I would like the remove the 5th dot in the navigation I would need to change the ID number of the CSS snippet like this:
/* Exclude a section from the navigation bar */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4 {
display: none !important;
}I changed the ID to 4 this will remove the 5th dot (remember we are starting with 0).
If you would like to remove multiple dots, for example, dot 1, 4, and 7 the CSS snippet will look like this:
/* Exclude a section from the navigation bar */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3,
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_6 {
display: none !important;
}Note: after id_0 and 3 I place a comma. This means we start with a new line.
How To Create A Navigation Bar With Labels
Instead of the dots, we can make labels with text to make it more descriptive.
Place the following CSS code in Divi > Theme Options > CSS
/* Name label 1 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before {
content: "About us";
}
/* Name label 2 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1:before {
content: "What we do";
}
/* Name label 3 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2:before {
content: "Faq";
}
/* Name label 4 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:before {
content: "Services";
}
/* Name label 5 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:before {
content: "Blog";
}
/* Name label 6 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:before {
content: "Contact";
}
/* Inactive label background color */
ul.et_pb_side_nav li.side_nav_item a {
color: #da181f !important;
background-color: #da181f;
}
/* Active label background color */
ul.et_pb_side_nav li.side_nav_item a.active {
color: #000000 !important;
background-color: #000000 !important;
}
/* Label text color */
ul.et_pb_side_nav li.side_nav_item a:before {
padding: 12px !important;
color: #fff !important;
}
/* Label styling */
ul.et_pb_side_nav li.side_nav_item {
margin-top: 5px;
text-align: right;
}
ul.et_pb_side_nav li.side_nav_item a {
-webkit-box-shadow: 0px 0px 18px 0px rgba(23, 22, 22, .5);
-moz-box-shadow: 0px 0px 18px 0px rgba(23, 22, 22, .5);
box-shadow: 0px 0px 18px 0px rgba(23, 22, 22, .5);
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
font-size: 18px;
display: inline !important;
border-radius: 5px;
}
ul.et_pb_side_nav li.side_nav_item a:before {
padding: 12px !important;
}
ul.et_pb_side_nav {
width: auto;
background: none;
top: 50%;
}CSS explained below.
Change label names
You can change the content of each label for your needs. If you need more labels then copy/paste this one and change the ID number to 6 and onwards.
/* Name label 1 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before {
content: "About us";
}Change the colors
Below this comment in the snippet “Inactive label background color” you can change the background color of the inactive labels. This is the red color in the demo.
Below this comment in the snippet “Active label background color” you can change the background color of the active label. This is the black color in the demo.
Below this comment in the snippet “Label color” you can change the text color of the labels.
Great, congrats… I will use this tip, to see working in my site, Thanks a lot!!
You’re welcome Carlos
Thank you for this tutorial. Do you have an example of this on a demo page? Is dot navigation always sticky or can you make it sticky?
Hi Alberto,
Yes, dot navigation is always sticky.
You can see a live demo here:
https://www.demo.markhendriksen.com/divi-dot-navigation/
Hi Mark,
This is great, useful and effective.
Thank you for this.
You’re welcome
Hi MArk
nice code – just a question though. I removed my second dot (id_1).
this works but leaves an empty space in my column of dots. Is there a way to remove that space?
Hi Christian,
If you can provide a link I will have a look for you.
This is awesome! Thank you! What would be the code for the Divi Fullwidth Slider to add text instead of dots?
Hi Chuck,
I don’t have that code ready but this is a good idea for a new tutorial.