1
Hallo Ich versuche, eine einzelne Webseite Website zu erstellen. Ich war in der Lage, die Navigation auf der rechten Seite mit Kreis zu erstellen, aber es zeigt nicht den Titel (das ist der Name jedes Teils des Menüs.)parallax Navigationsmenü Titel zu zeigen
Diese Webseite ist ein Beispiel für das Menü auf der rechten Seite. http://jonathannicol.com/projects/parallax-scrolling/
Hier ist meine CSS & HTML-Code:
#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 {
position: absolute;
right: 10px;
opacity: 1;
font-size: 13px;
text-transform: uppercase;
white-space: nowrap;
font-family: "brandon-grotesque";
letter-spacing: 3px;
font-weight: 400;
font-style: normal;
text-decoration: none;
margin-top: -11px;
padding: 0 0 5px 0;
-webkit-transition: all .3s cubic-beizer(.23,1,.32,1);
-moz-transition: all .3s cubic-beizer(.23,1,.32,1);
-ms-transition: all .3s cubic-beizer(.23,1,.32,1);
-o-transition: all .3s cubic-beizer(.23,1,.32,1);
transition: all .3s cubic-beizer(.23,1,.32,1);
line-height: 32px;
visibility: visible;
}<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>Gibt es trotzdem ich dieses Problem beheben? Vielen Dank!
zeigt es mir den Brief auf der linken Seite des Kreises, aber es zeigt mir nicht ganze Buchstaben .. –
In den Schnipsel oben oder auf Ihrer Website? Welchen Browser benutzen Sie? – Miro
In meiner Website! Im Snippet funktioniert es gut. Ich verwende Chrome/ –