2016-06-21 7 views
-6

Jungs Ich habe Schwierigkeiten, diese Navigationsleiste oben zu reparieren. Bitte helfen ... brauchen es schnellFestgelegte Navigationsleiste Ausgabe

<nav> 

    <span class="nav-btn"></span> 

    <ul class="nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</nav> 

der Stil i gesetzt haben, ist: -

nav{ 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 


nav .nav { 
    background: #333; 
    color: #fff; 
    margin: 0; 
    list-style: none; 
    text-align: center; 
} 

.nav li{ 
    display: inline-block; 
} 

.nav li a{ 
    color: #fff; 
    padding: 25px 35px; 
    font-size: 20px; 
    font-weight: bold; 
    background-color: #333; 
    display: block; 
} 

.nav li a:hover{ 
    background-color: #fff; 
    color: #333; 
} 

auch nach

nav{ 
    position: fixed; 
    top: 0; 
    width: 100%; 
} 

Ich bin nicht in der Lage es behoben.

+0

Sie das nav an der Spitze zu bleiben, immer, auch wenn gescrollt? – claudios

+0

Es ist bereits behoben, ich sehe kein Problem. Fügen Sie einfach etwas Inhalt hinzu, so dass scroll im Hauptteil erscheint, um zu sehen, dass es behoben ist. –

+0

Vielleicht sollte die Frage löschen? –

Antwort

1

Ihr Code ist bereits festgelegt .. Was ist das Problem, das Sie dabei haben ???

body{height:1000px;} 
 
nav{ 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
} 
 

 

 
nav .nav { 
 
    background: #333; 
 
    color: #fff; 
 
    margin: 0; 
 
    list-style: none; 
 
    text-align: center; 
 
} 
 

 
.nav li{ 
 
    display: inline-block; 
 
} 
 

 
.nav li a{ 
 
    color: #fff; 
 
    padding: 25px 35px; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    background-color: #333; 
 
    display: block; 
 
} 
 

 
.nav li a:hover{ 
 
    background-color: #fff; 
 
    color: #333; 
 
}
<nav> 
 

 
    <span class="nav-btn"></span> 
 

 
    <ul class="nav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
    </ul> 
 
</nav>

Verwandte Themen