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: 0 10px 0 0;
 -webkit-transition: opacity .3s 0s linear;
 -moz-transition: opacity .3s 0s linear;
 -ms-transition: opacity .3s 0s linear;
 -o-transition: opacity .3s 0s linear;
 transition: opacity .3s 0s linear;
 transform: translatez(0);
 -webkit-transform: translatez(0);
 -webkit-backface-visibility: hidden;
}

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

#fp-nav ul li {
 margin: 0;
 padding: 10px 0 10px 15px;
 cursor: pointer;
}

.color-weight-light #fp-nav ul li.active a {
 background-color: transparent;
 border: solid 2px #000;
}

.color-weight-light #fp-nav ul li a {
 background color: #000;
}

#fp-nav ul li.active a {
 width: 8px;
 height: 8px;
 margin-left: -1px;
}

#fp-nav ul li a {
 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;
  background color: #000;
}

.color-weight-light#fp-nav ul li .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;
}

li a{
position:relative;
}

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

Solution 2:

Could you please change style to...

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