Ajout d'un arrière-plan noir à la barre de navigation fixe à amorçage

J'ai beaucoup de mal à ajouter un arrière-plan noir fixe à ma barre de navigation amorcée. Dans mon CSS, j'ai déclaré la couleur de fond comme noire, mais cela ne semble rien changer. Mon propre CSS est déclaré après le CSS de base du bootstrap, donc il ne serait pas remplacé par une couleur par défaut. La barre de navigation est transparente, avec un lettrage opaque. Je ne sais pas quel est le problème, d'autant plus que j'ai déjà déclaré la couleur de la barre de navigation!Ajout d'un arrière-plan noir à la barre de navigation fixe à amorçage

Voici le code HTML de la barre de navigation:

<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

Et voici mon CSS. S'il vous plaît aider. Je deviens fou.

.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; 
}

Source

2017-07-15 Anon

Votre syntaxe est erronée. devrait être '.jumbotron .container .navbar-fixed-top' https://codepen.io/mcoker/pen/bRZmGR –

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

Faites un essai, .navbar {background -color: # 212121;} –

changer votre code CSS de .jumbotron navbar-fixed-top conteneur à .jumbotron .navbar-fixed-top.container Je mis à jour votre chèque de code ici

.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>

Source

2017-07-15 05:17:45

Merci! Quelle solution simple. Tout ce que j'ai fait était de changer la syntaxe de l'étiquette de la barre de navigation dans le CSS. – Anon

Je pense que c'est exactement ce dont vous avez besoin

<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>

EN OPTION --et si tu vouloir changer encore plus loin avec une autre couleur utiliser le css suivant:

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

Source

2017-07-15 07:39:09 BaDsHahSHIVAM

Ajout d'un arrière-plan noir à la barre de navigation fixe à amorçage

Répondre

Questions connexes