Bootstrap benutzerdefinierten Header mit Navbar

Ich versuche, einen benutzerdefinierten Header für meine Website mit Boostrap Navbar Klasse zu machen, möchte ich die Links Textfarbe zu weiß, die Navbar Hintergrundfarbe zu schwarz und ändern Sie auch die Links markieren Farbe, wenn die Maus über sie geht.Bootstrap benutzerdefinierten Header mit Navbar

Hier ist mein html:

<html> 
    <head> 
     <meta charset="UTF-8" /> 

     <!-- css files --> 
     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/> 
     <link rel="stylesheet" type="text/css" href="main.css"> 

     <!-- javascript --> 
     <script src="jquery.js"></script> 
     <script src="bootstrap/js/bootstrap.min.js"></script> 
    </head> 
    <body> 
     <!-- webiste header --> 
     <nav class="navbar navbar-default navbar-fixed-top header"> 
      <div class="container-fluid"> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#">link1</a></li> 
         <li><a href="#">link2</a></li>   
        </ul> 
       </div> 
      </div> 
     </nav> 
    <body> 
<html>

und hier ist meine CSS:

.header{ 
    background-color:#333333; 
    color:red; 
    font-size:1.5em; 
} 


.header li{ 
    border-bottom:3px solid #333333; 
} 

.header li:hover{ 
    background-color:black; 
    border-bottom:3px solid orange; 
}

Alles scheint zu funktionieren, aber die Links Farbe ist grau statt weiß, wie man auf diesem Screenshot sehen kann. screenshot

Quelle

2016-07-28 Alex_Doe

.header a { 
    color: #fff; 
} 

.header a:hover { 
    color: #f00; 
}

Quelle

2016-07-28 16:55:46 3rdthemagical

Bootstrap benutzerdefinierten Header mit Navbar

Antwort

Verwandte Themen