Hinzufügen eines schwarzen Hintergrunds zum Bootstrapping-Fixed-Top-Navbar

Ich habe viele Probleme, einen festen schwarzen Hintergrund zu meiner bootstrapped Navbar hinzuzufügen. In meinem CSS habe ich die Hintergrundfarbe als schwarz deklariert, aber es scheint nichts zu ändern. Mein eigenes CSS wird nach dem Kern CSS des Bootstrap deklariert, also würde es nicht durch eine Standardfarbe überschrieben werden. Die Navigationsleiste zeigt sich als transparent, mit opaker Schrift. Nicht sicher, was das Problem ist, vor allem, da ich bereits die Farbe der Navbar deklariert habe! HierHinzufügen eines schwarzen Hintergrunds zum Bootstrapping-Fixed-Top-Navbar

ist der HTML-Code für die navbar:

<div class="jumbotron"> 
    <div class="container"> 
    <nav class="navbar fixed-top"> 
     <div class="navbar-fixed-top container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#linktotop">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li> 
       <a href="#" role="button" aria-haspopup="true" aria-expanded="false">Personal Projects<span class="caret"></span></a> 
      </li> 
       <li><a href="#">Bullet Blog</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
     </div> 
</nav

Und hier ist mein CSS. Bitte helfen Sie. Ich werde verrückt.

.jumbotron navbar-fixed-top container{ 
    background: #2E2F31; 
    position: fixed; 
    width: 100%; 
} 
.navbar .navbar-nav li a { 
    color: white; 
    font-size: 16px; 
} 
.navbar .navbar-nav li a:hover { 
    background: #BFC1C3; 
} 
.navbar .navbar-nav .dropdown-menu li a:hover { 
    background: #BFC1C3; 
}

Quelle

2017-07-15 Anon

Ihre Syntax ist falsch. sollte '.jumbotron .container .navbar-fixed-top' sein https://codepen.io/mcoker/pen/bRZmGR –

' .jumbotron .navbar-fixed-top.container' – bhv

Probieren Sie es aus, .navbar {background -color: # 212121;} –

Ihre css aus .jumbotron navbar-fixed-top Container .jumbotron .navbar-fixed-top.container wechsle ich Ihren Code Check hier aktualisiert

.jumbotron .navbar-fixed-top.container{ 
 
    background: #2E2F31; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
.navbar .navbar-nav li a { 
 
    color: white; 
 
    font-size: 16px; 
 
} 
 
.navbar .navbar-nav li a:hover { 
 
    background: #BFC1C3; 
 
} 
 
.navbar .navbar-nav .dropdown-menu li a:hover { 
 
    background: #BFC1C3; 
 
}

<html lang="en"> 
 
<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="navbar-inverse jumbotron"> 
 
    <div class="container"> 
 
     <!-- Header --> 
 
<nav class="navbar fixed-top"> 
 
     <div class="navbar-fixed-top container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#linktotop">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li> 
 
       <a href="#" role="button" aria-haspopup="true" aria-expanded="false">Personal Projects<span class="caret"></span></a> 
 
      </li> 
 
      <li><a href="#">Bullet Blog</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div> 
 

 

 

 

 
</body> 
 
</html>

Quelle

2017-07-15 05:17:45

Vielen Dank! Was für eine einfache Lösung. Alles, was ich getan habe, war die Syntax der Navbar-Label in der CSS zu ändern. – Anon

Ich denke, das ist genau das, was Sie

<head> 
    <link rel="stylesheet" href="farji.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 

<body> 

    <div class=" jumbotron"> 
     <div class="container"> 
      <!-- Header --> 
      <nav class="navbar-fixed-top navbar-inverse"> 
       <div class="container"> 
        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
        </div> 
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
         <ul class="nav navbar-nav navbar-right"> 
          <li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>> 
          <li><a href="#">About</a></li> 
          <li> 
           <a href="#" role="button" aria-haspopup="true" aria-expanded="false">Personal Projects<span class="caret"></span></a> 
          </li> 
          <li><a href="#">Bullet Blog</a></li> 
          <li><a href="#">Contact</a></li> 
         </ul> 
        </div> 
       </div> 
      </nav> 
     </div> 
    </div> 
</body>

OPTIONAL brauchen --Und wenn Du Möchten Sie es mit jeder anderen Farbe noch weiter verändern, verwenden Sie folgende css:

.navbar-inverse { 
    background-color: #122c46; 
    border-color: #122c46; 
}

Quelle

2017-07-15 07:39:09 BaDsHahSHIVAM

Hinzufügen eines schwarzen Hintergrunds zum Bootstrapping-Fixed-Top-Navbar

Antwort

Verwandte Themen