Hoe zou ik de CSS moeten aanpassen om de kleur van de navigatiebalk in Twitter Bootstrap te veranderen?
tl;dr - TWBSColor - Genereer je eigen Bootstrap navbar
Version notes:
- Online tool: Bootstrap 3.3.2+ / 4.0.0+
- Dit antwoord: Bootstrap 3.0.x
Je'hebt twee basis navbars:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Hier zijn de belangrijkste kleuren en hun gebruik:
#F8F8F8
: achtergrond van de navigatiebalk#E7E7E7
: navbar rand#777
: standaard kleur#333
: hover kleur (#5E5E5E
voor .nav-brand
)#555
: actieve kleur#D5D5D5
: actieve achtergrondAls je een aangepaste stijl wilt gebruiken, is dit de CSS die je moet veranderen:
/* navbar */
.navbar-default {
background-color: #F8F8F8;
border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #555;
background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #777;
border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #333;
border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #555;
border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #CCC;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #333;
}
}
Hier zijn vier voorbeelden van een aangepaste gekleurde navigatiebalk:
[JSFiddle link][2]
Voer hier de beschrijving van de afbeelding in
En de SCSS code:
$bgDefault : #e74c3c;
$bgHighlight : #c0392b;
$colDefault : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
background-color: $bgDefault;
border-color: $bgHighlight;
.navbar-brand {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
.navbar-text {
color: $colDefault; }
.navbar-nav {
> li {
> a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}}
> .active {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}
> .open {
> a, > a:hover, > a:focus {
color: $colHighlight;
background-color: $bgHighlight; }}}
.navbar-toggle {
border-color: $bgHighlight;
&:hover, &:focus {
background-color: $bgHighlight; }
.icon-bar {
background-color: $colDefault; }}
.navbar-collapse,
.navbar-form {
border-color: $colDefault; }
.navbar-link {
color: $colDefault;
&:hover {
color: $colHighlight; }}}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu {
> li > a {
color: $colDefault;
&:hover, &:focus {
color: $colHighlight; }}
> .active {
> a, > a:hover, > a:focus, {
color: $colHighlight;
background-color: $bgHighlight; }}}
}
Ik'heb net een script gemaakt waarmee je je eigen thema kunt genereren: TWBSColor - Genereer je eigen Bootstrap navbar
[Update]: TWBSColor genereert nu SCSS/SASS/Less/CSS code.
[Update]: Vanaf nu kun je Less gebruiken als de standaardtaal die TWBSColor biedt
[Update]: TWBSColor ondersteunt nu drop down menu's colorization
[Update]: TWBSColor maakt het nu mogelijk om uw versie te kiezen (Bootstrap 4 ondersteuning toegevoegd)
Updated 2018 voor Bootstrap 4
Het veranderen van de Navbar kleur is anders (en een beetje makkelijker) in Bootstrap 4. Je kunt een custom navbar class maken, en er vervolgens naar verwijzen om de navbar te veranderen zonder impact op andere Bootstrap navs...
<nav class="navbar navbar-custom">...</nav>
Bootstrap 4.0
De CSS die nodig is om de Navbar te veranderen is veel minder in Bootstrap 4...
.navbar-custom {
background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
}
Bootstrap 4 Custom Navbar Demo
Het veranderen van de actieve/hover link achtergrond kleur werkt ook met dezelfde CSS, maar je moet de padding aanpassen als je wilt dat de bg kleur de volledige hoogte van de link vult...
py-0
om verticale opvulling van de hele navbar te verwijderen...
<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>
/* change the link color and padding */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
padding: .75rem 1rem;
}
/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #ffffff;
background-color: #333;
}
Bootstrap 4 Link en achtergrondkleur veranderen Demo
Zie ook: https://stackoverflow.com/questions/42586729/
Bootstrap 3
<nav class="navbar navbar-custom">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
</button>
<a class="navbar-brand" href="#">Title</a>
</div>
...
</nav>
.navbar-custom {
background-color:#229922;
color:#ffffff;
border-radius:0;
}
.navbar-custom .navbar-nav > li > a {
color:#fff;
}
.navbar-custom .navbar-nav > .active > a {
color: #ffffff;
background-color:transparent;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
text-decoration: none;
background-color: #33aa33;
}
.navbar-custom .navbar-brand {
color:#eeeeee;
}
.navbar-custom .navbar-toggle {
background-color:#eeeeee;
}
.navbar-custom .icon-bar {
background-color:#33aa33;
}
Als de Navbar dropdowns heeft, voeg dan het volgende toe om de kleur(en) van de dropdowns te veranderen:
/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu {
background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a {
color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus {
color: #33aa33;
}
Je zou ook kunnen overwegen om je eigen versie te compileren. Probeer http://getbootstrap.com/customize/ (die een aparte sectie heeft voor de Navbars instellingen (Standaard Navbar en Omgekeerde Navbar)) of download je eigen kopie van https://github.com/twbs/bootstrap.
Je vindt de navbar instellingen in variables.less
. navbar.less
wordt gebruikt om de navbar te compileren (hangt af van variables.less
en mixins.less
).
Kopieer de 'navbar-default sectie' en vul je eigen kleurinstellingen in. Het wijzigen van de variabelen in variables.less
zal de makkelijkste manier zijn (het wijzigen van de standaard of inverse navbar zal'geen probleem zijn omdat je maar één navbar per pagina hebt).
Je zult'niet alle instellingen veranderen in de meeste gevallen:
// Navbar
// -------------------------
// Basics of a navbar
@navbar-height: 50px;
@navbar-margin-bottom: @line-height-computed;
@navbar-default-color: #777;
@navbar-default-bg: #f8f8f8;
@navbar-default-border: darken(@navbar-default-bg, 6.5%);
@navbar-border-radius: @border-radius-base;
@navbar-padding-horizontal: floor(@grid-gutter-width / 2);
@navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2);
// Navbar links
@navbar-default-link-color: #777;
@navbar-default-link-hover-color: #333;
@navbar-default-link-hover-bg: transparent;
@navbar-default-link-active-color: #555;
@navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color: #ccc;
@navbar-default-link-disabled-bg: transparent;
// Navbar brand label
@navbar-default-brand-color: @navbar-default-link-color;
@navbar-default-brand-hover-color: darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg: transparent;
// Navbar toggle
@navbar-default-toggle-hover-bg: #ddd;
@navbar-default-toggle-icon-bar-bg: #ccc;
@navbar-default-toggle-border-color: #ddd;
Je zou ook http://twitterbootstrap3navbars.w3masters.nl/ kunnen proberen. Deze tool genereert CSS code voor je aangepaste navbar. Optioneel kun je ook kleurverlopen en randen toevoegen aan de navbar.