How To Use And style The Divi Dot Navigation

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:

Each dot in the floating navigation bar stands for a section on your page.

Divi dot navigation example

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.

Enable Divi dot navigation

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
Styling the dot navigation bar

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.

Divi dot navigation with labels

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.

You Might Also Like…

6 thoughts on “How To Use And style The Divi Dot Navigation”

  1. 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?

    Reply

Leave a Comment

6 Shares
Share5
Pin1
Tweet