Como eu modificaria o CSS para alterar a cor da barra de navegação no Twitter Bootstrap?
tl; dr - TWBSColor - Gere sua própria barra de navegação do Bootstrap
Notas da versão: - Ferramenta online: Bootstrap 3.3.2+ / 4.0.0+ - Esta resposta: Bootstrap 3.0.x
Você tem duas barras de navegação básicas:
<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>
Aqui estão as principais cores e seu uso:
#F8F8F8: fundo da barra de navegação#E7E7E7: borda da barra de navegação#777: cor padrão#333: cor do foco ( #5E5E5Epara .nav-brand)#555: cor ativa#D5D5D5: fundo ativoSe você deseja colocar um estilo personalizado, aqui está o CSS que você precisa alterar:
/* 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;
}
}
Aqui estão quatro exemplos de uma barra de navegação colorida personalizada:
E o código SCSS:
$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; }}}
}
Acabei de criar um script que permitirá gerar seu tema: TWBSColor - Gere sua própria barra de navegação do Bootstrap
[Atualização]: TWBSColor agora gera código SCSS / SASS / Less / CSS.
[Atualização]: A partir de agora, você pode usar Menos como o idioma padrão fornecido pelo TWBSColor
[Atualização]: TWBSColor agora oferece suporte à coloração dos menus suspensos
[Atualização]: TWBSColor agora permite escolher sua versão (suporte ao Bootstrap 4 adicionado)
!importantao final de cada uma das instruções CSS geradas parece ter resolvido o problema. Exemplo:color: #ffffff;torna - secolor: #ffffff !important;.Atualização 2020
Alterar a cor da barra de navegação é diferente (e um pouco mais fácil) no Bootstrap 4 . Você pode criar uma classe personalizada da barra de navegação e, em seguida, referenciá-la para alterar a barra de navegação sem afetar outras navs do Bootstrap.
Bootstrap 4.3 ou superior
O CSS necessário para alterar a Navbar é muito menor no Bootstrap 4 ...
Demonstração personalizada da barra de navegação do Bootstrap 4
Alterar a cor do plano de fundo do link ativo / pairar também funciona com o mesmo CSS, mas você deve ajustar o preenchimento se quiser que a cor bg preencha toda a altura do link ...
py-0para remover o preenchimento vertical de toda a barra de navegação ...<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>Demonstração do Link de Mudança do Bootstrap 4 e da Cor de Fundo
Veja também: Bootstrap 4 Change Hamburger Toggler Color
Bootstrap 3
Demonstração Navbar personalizada no Bootply
Se a barra de navegação tiver menus suspensos, adicione o seguinte para alterar as cores do menu suspenso:
Demonstração com Dropdown
fonte
Demorei um pouco, mas descobri que incluir o seguinte tornava possível alterar a cor da barra de navegação:
fonte
background-imageacréscimo, o que impediria o TWBSColor funcionar. Posso saber a versão do seu Bootstrap e seu ambiente, por favor? (tema adicional, bibliotecas CSS ...)Usando Menos
Você também pode considerar compilar sua própria versão. Tente http://getbootstrap.com/customize/ (que possui uma seção separada para as configurações da barra de navegação (barra de navegação padrão e barra de navegação invertida)) ou faça o download da sua própria cópia em https://github.com/twbs/bootstrap .
Você encontrará as configurações da barra de navegação em
variables.less.navbar.lessé usado para compilar a barra de navegação (depende devariables.lessemixins.less).Copie a 'seção padrão da barra de navegação' e preencha suas próprias configurações de cores. Alterar as variáveis
variables.lessserá a maneira mais fácil (alterar a barra de navegação padrão ou inversa não será um problema, porque você tem apenas uma barra de navegação por página).Você não alterará todas as configurações na maioria dos casos:
Você também pode tentar http://twitterbootstrap3navbars.w3masters.nl/ . Essa ferramenta gera código CSS para sua barra de navegação personalizada. Opcionalmente, você também pode adicionar cores e bordas gradientes à barra de navegação.
fonte
Basta adicionar um ID à barra de navegação HTML, como:
Com esse ID, você pode estilizar a cor da barra de navegação, mas também os links e as listas suspensas
Exemplos aplicados a diferentes tipos de barras de navegação
Preto
Amarelo
Azul escuro
Cereja vermelha)
Verde escuro
Aqui está o CSS
fonte
Você precisa alterar o CSS diretamente? A respeito...
fonte
Tente isso também. Isso funcionou para mim.
fonte
Se é só mudar a cor da barra de navegação, minha sugestão é usar: Bootstrap Magic . Você pode alterar os valores para diferentes propriedades da barra de navegação e ver uma visualização.
Faça o download do resultado como uma folha de estilos CSS personalizada ou como um arquivo Menos variáveis. Você pode alterar valores com campos de entrada e seletores de cores.
fonte
Neste CSS da barra de navegação, defina a própria cor:
fonte
Exemplo
Apenas tente assim:
Arquivo
navabr.cssOs principais usos padrão das cores são os seguintes:
Você pode aprender mais em Para alterar a cor da barra de navegação no Twitter Bootstrap 3 .
fonte
A menção inversa e padrão do nome da classe no Twitter Bootstrap faz com que sejam em preto e branco.
Melhor, você não deve substituir isso e adicionar uma classe perto disso e escrever um estilo específico para isso:
fonte
Usar:
25+ Código de menus de navegação do Bootstrap
fonte