**not tested in Divi 2.4+

If you activate the sidebar navigation in Divi you will get the dot navigation on the right of your screen that helps users scroll to sections on 1 page websites or on longer pages. With a little extra code (from Carl @ One Guy Website ) you can add your own content to replace the dots. You can see what the result looks like @ beffas club repair 

In this example we will be adding text to replace each dot on the men, but you can also add an icon into the, content: “xxx”;

1 – create a page and set up your sections as each dot (that we will change into text) links to a section.

2 – activate the side navigation in your page (dropdown on the right of your page admin)

3. Add the following code to your ePanel CSS area or into your child theme style.css. You will need to add extra/fewer code sections depending on how many sections you have. Below has 3 sections (id-0, id-1 and id-2)

**when you copy/paste the code below, re-type the ” ” manually in your css file or epanl as they sometimes create errors.

/* side nav customization */
ul.et_pb_side_nav {
width:65px;
padding:5px 10px 5px 2px;
}
ul.et_pb_side_nav li.side_nav_item {
position: relative;
}
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: “the text for your first section”;
position: absolute !important;
top: 0;
}
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_1:before{
color: #ffffff !important;
content: “the text for your second section”;
position: absolute !important;
top: 0;
}
ul.et_pb_side_nav .side_nav_item a#side_nav_item_id_2:before{
color: #ffffff !important;
content: “the text for your third section”;
position: absolute !important;
top: 0;
}
ul.et_pb_side_nav .side_nav_item a {
background: none repeat scroll 0 0 transparent !important;
color: transparent !important;
text-indent: 0;
}
ul.et_pb_side_nav .side_nav_item a.active {
background-color: transparent !important;
}

Comments

comments

Pin It on Pinterest