J'ai joué avec bootstrap alors construisez-moi une petite page personnelle où j'ai une barre de navigation qui ressemble à ceci:

<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
    <div class="navbar-header page-scroll">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#home">Jon Snow</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="page-scroll">
                <a href="#about">About Me</a>
            </li>
            <li class="page-scroll">
                <a href="#work">Work</a>
            </li>
            <li class="page-scroll">
                <a href="#blog">Blog</a>
            </li>
            <li class="page-scroll">
                <a href="#contact">Contact Me</a>
        </ul>
    </div>
   </div>
  </nav>
</body>

Et son style est le suivant:

body {
   background-color:#2c3e50;
 }

.navbar-fixed-top.navbar-shrink {
   color:white;
   padding: 10px 0;
   background: rgba(0, 0, 0, .1);
 }

Mais j'obtiens une ligne blanche sur la barre de navigation qui ressemble à ceci: entrez la description de l'image ici

Comment supprimer la ligne blanche et changer les couleurs des éléments de la barre de navigation en blanc?

Voici un JS Fiddle.

0
Dikshant Adhikari 3 janv. 2016 à 07:52

4 réponses

Meilleure réponse

Voici les règles que vous pouvez appliquer pour supprimer les bordures (sur toutes les fenêtres) et changer la couleur des éléments li.

Voir l'exemple de travail Extrait.

body,
html {
  background: #2c3e50;
}
.navbar.navbar-default {
  padding: 10px 0;
  background: rgba(0, 0, 0, .1);
  border: none;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
  color: white;
}
.navbar.navbar-default .navbar-collapse {
  border: none;
  box-shadow: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="#home">Jon Snow</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="page-scroll">
          <a href="#about">About Me</a>
        </li>
        <li class="page-scroll">
          <a href="#work">Work</a>
        </li>
        <li class="page-scroll">
          <a href="#blog">Blog</a>
        </li>
        <li class="page-scroll">
          <a href="#contact">Contact Me</a>
      </ul>
    </div>
  </div>
6
vanburen 3 janv. 2016 à 05:01

Ajoutez simplement ceci à votre style:

.navbar {  border: none!important; }

Bootstrap nav a une bordure par défaut.

Et la couleur:

.navbar-default .navbar-nav li a { color: #fff; }
2
Andrew Adam 3 janv. 2016 à 04:59

La ligne est causée par les CSS suivants dans Bootstrap

.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

Écrasez ce {{x0}} avec n'importe quelle couleur ou aucune couleur que vous souhaitez.

Pour ces liens changent de couleur avec ceci

.navbar-default .navbar-nav > li > a{
    color:**your color** !important;
}

Vous pouvez faire le vol stationnaire, actif, focus et visités pour les liens comme celui-ci

.navbar-default .navbar-nav > li > a:hover{color: **your color** !important;}
.navbar-default .navbar-nav > li > a:active{color: **your color** !important;}
.navbar-default .navbar-nav > li > a:focus{color: **your color** !important;}
.navbar-default .navbar-nav > li > a:visited{color: **your color** !important;}

J'espère que cela pourra aider!

0
abetwothree 3 janv. 2016 à 05:09

Ce mec ici:

.navbar-default {
    border-color: #e7e7e7;
}

Changer cela en {{x0}} ou la même couleur que votre couleur de fond. Devrait faire le tour.

MODIFIER

Désolé, j'ai raté la deuxième partie de votre question. Cela devrait définir votre couleur de texte dans la barre de navigation de navigation:

.navbar-default .navbar-nav>li>a {
    color: #fff;
}

Ensuite, vous aurez besoin d'une règle {{x0}} (ou d'un autre état):

.navbar-default .navbar-nav>li>a {
    color: red;
}
0
Damon 3 janv. 2016 à 04:56