Parallax Navigation Menu Title To Show

Hi I am trying to create a single webpage website. I was able to create the navigation on the right side using circle, but it does not show the title(which is the name of each part

Solution 1:

Try this. CSS edited at the bottom of style.

#fp-nav {
 position: fixed;
 z-index: 52;
 top: 50%;
 right: 15px;
 padding: 010px00;
 -webkit-transition: opacity .3s0s linear;
 -moz-transition: opacity .3s0s linear;
 -ms-transition: opacity .3s0s linear;
 -o-transition: opacity .3s0s linear;
 transition: opacity .3s0s linear;
 transform: translatez(0);
 -webkit-transform: translatez(0);
 -webkit-backface-visibility: hidden;
}

#fp-navul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#fp-navulli {
 margin: 0;
 padding: 10px010px15px;
 cursor: pointer;
}

.color-weight-light#fp-navulli.activea {
 background-color: transparent;
 border: solid 2px#000;
}

.color-weight-light#fp-navullia {
 backgroundcolor: #000;
}

#fp-navulli.activea {
 width: 8px;
 height: 8px;
 margin-left: -1px;
}

#fp-navullia {
 width: 10px;
 height: 10px;
 display: block;
 text-decoration: none;
 -webkit-border-radius: 50%;
 border-radius: 50%;
 -webkit-transition: background color .1s linear,border color .1s linear;
 -moz-transition: background color .1s linear,border color .1s linear;
 -ms-transition: background color .1s linear,border color .1s linear;
 -o-transition: background color .1s linear,border color .1s linear;
 transition: background color .1s linear,border color .1s linear;
  backgroundcolor: #000;
}

.color-weight-light#fp-navulli.nav-title {
 color: #000;
}


.nav-title {
opacity: 0;
visibility: visible;
position: absolute;
top: 0;
right: 20px;
text-align: right;
width: 200px;
transition:1s;
}

li:hover.nav-title {
opacity:1;
}

lia{
position:relative;
}

<scriptsrc="https://use.fontawesome.com/5a33902e83.js"></script><divid="fp-nav"style="margin-top: -46px;"class="color-weight-light"><ul><li><ahref="#top"><iclass="fa fa-circle"aria-hidden="true"></i><spanclass="nav-title">Home</span></a></li><li><ahref="#content"><iclass="fa fa-circle"aria-hidden="true"></i><spanclass="nav-title">Slim Products</span></a></li><li><ahref="#home-block-one"><iclass="fa fa-circle"aria-hidden="true"></i><spanclass="nav-title">Blogs</span></a></li><li><ahref="#home-block-two"><iclass="fa fa-circle"aria-hidden="true"></i><spanclass="nav-title">Heatlh Products</span></a></li><li><ahref="#home-block-three"><iclass="fa fa-circle"aria-hidden="true"></i><spanclass="nav-title">Video</span></a></li><li><ahref="#home-block-four"><iclass="fa fa-circle"aria-hidden="true"></i><spanclass="nav-title">Skin Products</span></a></li></ul></div>

Solution 2:

Could you please change style to...

.nav-title { opacity: 1; visibility: visible; }