Changer la couleur de la barre de navigation bootstrap sur le lien survol?
Je veux savoir comment changer la couleur des liens lorsque vous les survolez dans la barre de navigation, car ils sont actuellement d'une couleur laide.
Merci pour vos suggestions?
HTML:
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div>
</div>
</div>
Pour Bootstrap 3, voici comment je l’ai fait sur la structure par défaut Navbar :
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #FFFF00;
color: #FFC0CB;
}
C'est plus propre:
ul.nav a:hover { color: #fff !important; }
Il n'y a pas besoin d'être plus précis que cela. Malheureusement, le !important est nécessaire dans ce cas.
J'ai également ajouté :focus et :active à la même déclaration pour des raisons d'accessibilité et pour les utilisateurs de smartphone/tablette/écran tactile.
Vous pouvez essayer ceci pour changer l’arrière-plan du lien en survol
.nav > li > a:hover{
background-color:#FCC;
}
Vous devriez écraser la règle CSS:
.navbar-inverse .brand, .navbar-inverse .nav > li > a
ou
.navbar .brand, .navbar .nav > li > a
cela dépend si vous utilisez le thème sombre ou clair, respectivement. Pour ce faire, ajoutez un CSS avec vos règles écrasées et assurez-vous qu'il figure dans votre code HTML après le CSS Bootstrap. Par exemple:
.navbar .brand, .navbar .nav > li > a {
color: #D64848;
}
.navbar .brand, .navbar .nav > li > a:hover {
color: #F56E6E;
}
Il y a aussi l'alternative où vous personnalisez votre propre Boostrap ici . Dans ce cas, dans la section Navbar, vous avez le @navbarLinkColor.
.nav > li > a:focus,
.nav > li > a:hover
{
text-decoration: underline;
background-color: pink;
}
Ciblez l'élément que vous souhaitez modifier et utilisez !important pour écraser tous les styles existants affectés à cet élément. Assurez-vous de ne pas utiliser la déclaration !important lorsque ce n'est pas absolument nécessaire.
div.navbar div.navbar-inner ul.nav a:hover {
color: #fff !important;
}
Mise à jour 2018
Vous pouvez modifier les couleurs du lien Navbar avec CSS pour remplacer les couleurs Bootstrap ...
Bootstrap 4
.navbar-nav .nav-item .nav-link {
color: red;
}
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-item:hover .nav-link {
color: pink;
}
Démonstration de la couleur de Bootstrap 4 navbar link
Bootstrap 3
.navbar .navbar-nav > li > a,
.navbar .navbar-nav > .active > a{
color: orange;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
color: red;
}
Démonstration de la couleur de Bootstrap 3 navbar link
La modification ou personnaliser la couleur entière de la barre de navigation, voir: https://stackoverflow.com/a/18530995/171456
Utilisez le lien Come thing this, ceci est basé sur Bootstrap 3.0
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: #977EBD;
color: #FFFFFF;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
background-color: #977EBD;
color: #FFFFFF;
}
Désolé pour la réponse tardive. Vous ne pouvez utiliser que:
nav a:hover{
background-color:color name !important;
}
Quelque chose comme ça a fonctionné pour moi (avec Bootstrap 3):
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus{
font-family: proxima-nova;
font-style: normal;
font-weight: 100;
letter-spacing: 3px;
text-transform: uppercase;
color: black;
}
Dans mon cas, je voulais aussi que le texte du lien reste noir avant le vol stationnaire, alors j’ai ajouté .navbar-nav> li> a
.navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-nav > li > a{
font-family: proxima-nova;
font-style: normal;
font-weight: 100;
letter-spacing: 3px;
text-transform: uppercase;
color: black;
}
Si vous barre de navigation code comme suit:
<div class="navbar navbar-default navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../navbar/">Default</a></li>
<li><a href="../navbar-static-top/">Static top</a></li>
<li class="active"><a href="./">Fixed top</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
Ensuite, utilisez simplement le style CSS suivant pour changer la couleur de survol de votre marque navbar-brand
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: white;
}
Ainsi, votre couleur de survol navbad-brand sera changée en blanc. Je viens de le tester et cela fonctionne correctement pour moi.
Cela devrait suffire:
.nav.navbar-nav li a:hover {
color: red;
}