How to add and customize the Divi dot navigation

The Divi dot navigation is a built-in feature designed to improve the overall UI and UX of your website by adding clickable dot navigation links to your page that link to corresponding sections on your page.

It’s essentially a floating link bar with integrated dot icon anchor links that readers can use to jump between different sections of your webpage.

Here’s a look at how the Dot Navigation looks and works when activated on your website:

Divi Dot Navigation

By default, the “Dot Navigation” feature is disabled in Divi and must be activated to appear.

There are no built-in options to customize how the dot navigation bar looks and feels. And so, for the purpose of this article, we have put together a detailed guide on how to enable and then customize the Dot Navigation.

So, let’s get started:

How to enable Divi Dot Navigation?

To enable Dot Navigation, all you have to do is log in to your WordPress backend dashboard, and from there go to the page where you wish to turn on Dot Navigation. Inside the “Divi Page Settings” area you will find the option “Dot Navigation.” Select it and choose the “On” option and that’s it!

Enable Divi Dot Navigation

You have successfully enabled Divi Dot Navigation for that particular page.

How to customize Divi Dot Navigation?

As mentioned earlier, by default, there are no options or settings that allow you to customize the look and feel of the dot navigation bar. You can’t just select it inside the Divi editor, go into its settings and make changes to it there.

As such, if you don’t like the default look of the navigation bar and want to adjust it to your preferences then you will need to add some custom CSS.

Now, you don’t need to get too worried if you don’t know how to code. We have provided all the sample CSS code you will need to customize the dot navigation bar. We will also show you parts of the code you can tweak to apply your unique specific customizations.

All you need to do is just head over to Divi> Theme Options> General, and from there scroll down till you find a dedicated field for Custom CSS. Now, just copy-paste the code snippet in the field shown in the image below, and the navigation bar will automatically update with the new style.

Add Custom CSS Code to Divi

So now that you know how to customize the navigation bar, let’s take a look at the custom CSS code snippets.

Change the color of the Divi Dot Navigation bar

First, let’s change the color scheme for the Dot Navigation bar. To do this, you’ll need to copy-paste the following CSS Code Snippet into the custom CSS field as discussed above.

CSS code to change the color of Dot Navigation bar

You can use the following code;

/* Background color bar */
ul.et_pb_side_nav {
    background: #f7d425;
}
/* 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: #ffffff;
}

Once done, click on the “Save Changes” button and go to the webpage where you have Divi Dot Navigation enabled. You’ll now see that the color scheme for the navigation bar has changed to fit in with the overall design.

Dot navigation color changed

Now, do note that the shared code snippet will change the color of navigation to “golden yellow” as you see in this image. If you want to customize the color, then you need to slightly tweak the code snippet and enter the “hex code” for the color you want.

For example, if you want the navigation bar to be the color “red” then you need to replace the hex code for the “background” element with “#FF0000.” Likewise, you can also change the “active dot color” and “inactive dot color” by replacing the hex codes for the appropriate elements as labeled in the CSS code snippet.

If you don’t know the hex code for the color you want to use, then you can reference this website.

Replace the navigation dots with labels for better clarity

Now, you might want to change the Dot Navigation bar into a Label Navigation bar – where instead of dots representing each section, the reader gets to see the actual section names. This can really help with user navigability but also take up a portion of the screen real estate.

However, if you do decide to use labels instead of dots, all you need to do is enter the following code snippet into the Custom CSS area as before.

CSS Code to replace dots with labels

You can use the following code snippet;

/* Name label 1 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_0:before {
	content: "Section 1";
}
/* Name label 2 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1:before {
	content: "Section 2";
}
/* Name label 3 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2:before {
	content: "Section 3";
}
/* Name label 4 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_3:before {
	content: "Section 4";
}
/* Name label 5 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_4:before {
	content: "Section 5";
}
/* Name label 6 */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_5:before {
	content: "Section 5";
}
/* 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%;
}

Note: The above code snippet also includes the option to change the color of the navigation bar. As such, if you are using this one, no need to use the previous snippet.

Now, of course, we know you’ll need to change the name of the particular section to something that fits your layout. This is why we left it as generic as possible. Now to change the label, just tweak the value of the “content:” element for the appropriate section in the code snippet.

Also, our demo code snippet only includes labelling for 6 sections. If your layout contains more sections, then all you need to do is create add the following code snippet for as many extra labels you want to add:

/* Name label Number */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_NU#:before {
content: “Section Number”;
}

IMPORTANT: Remember to change NU# with the section id number. The id number for the first section is 0, and every subsequent section increases by 1.

Also, to change the label of a particular section to something else, you need to tweak the value of the “content:” element for that section in the code snippet.

Now, after adding the CSS code, here is how our navigation bar looks like:

Navigation bar dots replaced with labels

As you can see, all the dots are now replaced with labels for each section.

You can also notice down below that there are a lot of empty sections with no labels. These are sections present in the layout so the Divi Dot Navigation detected it and is now showing them. However, these sections are mostly redundant and we don’t want our readers moving there.

As such, in the next segment, we will talk about how you can remove sections from the navigation bar.

Remove sections from the navigation bar

The Divi Dot Navigation feature is programmed to detect all sections in the page layout and then present them to the reader. However, some of the sections in the layout might actually be sub-sections contextually and it doesn’t make sense to provide a dedicated button to jump to them.

Furthermore, having too many sections in the navigation bar will make the design look and feel a bit cluttered. It is always best practice to only provide readers/visitors an option to jump to the truly important sections on your page layout.

As such, here we have the code snippet to help you remove dots and/or labels from the navigation bar:

/* Exclude a section from the navigation bar */
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_NU# {
display: none !important;
}

CSS Code to remove dots from the navigation bar

By changing the NU# with the corresponding id number, you can remove the dot corresponding to that section from the navigation bar. Also, if you want to remove multiple sections, you will need to enter multiple instances of the above code snippet and adjust the NU# with the proper section id.

Note: The id number for the first section is 0, the second section is 1, and so on.

After entering the code snippet into the Custom CSS area just hit the “Save Changes” button and that’s it! You have successfully removed a section dot from the Divi Dot Navigation bar.

Wrapping up

So this was our quick and comprehensive guide on how to use Divi Dot Navigation and customize them to your likings. As you can see, the feature can really help improve your site’s user experience and make it more navigable if you have long-form pages.

Also, if you wish to customize the navigation bar, that too is possible by adding a bit of CSS wizardry. Just copy-paste the code snippets we shared here in the article, tweak the parameters, and the dot navigation bar will reflect your desired look and feel.

That being said, if you face any sort of issue with the code snippet then feel free to write us a comment. We will try to help fix your problem asap.