Bootstrap 4 Alterar cor do alternador de hambúrguer

124

Tenho um site de bootstrap em que o alternador de hambúrguer é adicionado quando o tamanho da tela é menor que 992 px. O código é assim:

<button class="navbar-toggler navbar-toggler-right" 
        type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" 
        aria-expanded="false" 
        aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button>

Existe alguma possibilidade de alterar a cor do botão de alternância de hambúrguer?

css  twitter-bootstrap  bootstrap-4 
— Rehan
fonte
2
O código não funciona como no bootply
— Jordan.JD
Não é realmente uma resposta, mas você pode brincar com o navbar-toggler-icon em advertentiekracht.nl/togglerIcon.html O bootstraps toggler-icon é usado como um elemento de estilo externo em vez de se referir à folha de estilo do bootstrap. Também é explicado como gerenciar isso.
— ben Thijssen

Respostas:

245

O navbar-toggler-icon(hambúrguer) no Bootstrap 4 usa um SVG background-image. Existem 2 "versões" da imagem do ícone toggler. Um para uma barra de navegação clara e um para uma barra de navegação escura ...

  • Use navbar-darkpara alternar entre claro / branco em fundos mais escuros
  • Use navbar-lightpara alternar entre escuro / cinza em fundos mais claros
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

Portanto, se quiser alterar a cor da imagem alternada para outra, você pode personalizar o ícone. Por exemplo, aqui eu defino o valor RGB para rosa (255,102,203). Observe ostroke='rgba(255,102,203, 0.5)' valor nos dados SVG:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

Demo http://www.codeply.com/go/4FdZGlPMNV

OFC, outra opção para usar apenas um ícone de outra biblioteca ou seja: Font Awesome, etc.

Atualize o Bootstrap 4.0.0:

A partir do Bootstrap 4 Beta, navbar-inverseagora navbar-darkpode ser usado em barras de navegação com cores de fundo mais escuras para produzir links mais claros e cores alternadas.

Como alterar as cores do Bootstrap 4 Navbar

— Zim
fonte
2
No Bootstrap 4 beta 1 não há .navbar-inverseclasse. você pode escolher entre duas classes: .navbar-lightou .navbar-dark.
— Qrzysio
53

Use um ícone incrível de fonte como o ícone padrão da sua barra de navegação.

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

Ou tente isso em versões antigas de fontes incríveis:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
— Amirreza Mohammadi
fonte
3
Para fontawesome 5 barras de uso. fontawesome.com/icons/bars?style=solid
— Murtaza Bhurgri
É a melhor ideia.
— Shiva Manhar
7

Você pode criar o botão de alternância com css apenas de uma forma muito fácil, não há necessidade de usar nenhuma fonte em SVG ou ... forame.

Seu botão:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

Seu estilo de botão:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

Estilo de sua linha horizontal:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

Demo

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}
<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>
Expandir trecho

— Ghafor Sabury
fonte
5

basta inserir a classe navbar-darkou navbar-lightno elemento nav:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
— Thái An Nguyễn
fonte
4

A maneira mais fácil é substituir este código de bootstrap padrão:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

por este :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

E não se esqueça de adicionar este código também ao seu arquivo:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Espero que ajude!!

— Prateek Gupta
fonte
3

Se você baixou o bootstrap, vá para bootstrap-4.4.1-dist / css / bootstrap.min

Eu. encontre o .navbar-light .navbar-toggler-iconou o.navbar-dark .navbar-toggler-icon seletor

ii. selecione o atributo background-image e seu valor. O snippet é semelhante a este:

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
Expandir trecho

iii. copie o snippet e cole-o em seu CSS personalizado

iv. mude o stroke=’rgba(0,0,0,0.5)’valor para o seu valor rgba preferido

— Eyoab
fonte
2

EDIT: meu mal! Com minha resposta, o ícone não se comportará como um alternador Na verdade, ele será mostrado mesmo quando não estiver recolhido ... Ainda pesquisando ...

Isso funcionaria:

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

O truque proposto pela minha resposta é substituir o navbar-togglerpor uma classe de botão clássica btne, como respondido anteriormente, usar uma fonte de ícone.

Observe que, se você mantiver <button class="navbar-toggler">, o botão terá uma forma "estranha".

Conforme declarado neste post no github , o bootstrap usa alguns "truques de css", então os usuários não precisam depender de fontes.

Portanto, apenas não use a "navbar-toggler"classe em seu botão se quiser usar uma fonte de ícone.

Felicidades.

— Stockersky
fonte
Isso só "funciona" se você usar Font Awesome, que não faz parte do Bootstrap
— Zim
Eu acho que você precisa remover o comentário sobre a resposta dada por Amirreza Mohammadi da lista. Obrigado.
— NoChance 01 de
2

Acabei de desenvolver uma solução consideravelmente mais fácil. (Sim, eu sei que esta é uma pergunta antiga, mas alguém pesquisando o mesmo problema pode achar isso útil.)

Eu estava usando um SVG chamado hamburger.svg. Eu olhei para ele com um editor de texto e não consegui encontrar nada que definisse uma cor para as três linhas - estou supondo que o padrão é preto porque esse é certamente o comportamento que recebo - então simplesmente adicionei um parâmetro de "traço" ao a definição do SVG. Isso não funcionou BASTANTE - as bordas das três linhas eram da minha cor escolhida (branco), mas o resto da linha ainda era preta, então eu adicionei um parâmetro de "preenchimento" também. E isso funcionou!

Aqui está o código para o hamburger.svg original em sua totalidade:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

E aqui está o código para o novo SVG depois de editá-lo e salvá-lo como hamburger_white.svg:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

Como você pode ver se rolar para a direita, tudo que fiz foi adicionar: 

stroke="white" fill="white"

até o final do caminho. A outra coisa que tive que fazer foi mudar o nome do arquivo do hambúrguer no HTML. Sem mexer no CSS e sem a necessidade de rastrear outro ícone.

Fácil! Você pode imitar isso para fazer seu hambúrguer da cor que quiser.

— Henry
fonte
1

Se você trabalha com a versão sass do bootstrap, _variables.scssvocê pode encontrar $navbar-inverse-toggler-bgou $navbar-light-toggler-bgonde pode alterar a cor e o estilo do botão de alternância.

Em html você tem que usar navbar-inverseou navbar-lightdependendo de qual versão você deseja usar.

— nedeco
fonte
não funciona no bootstrap 4 em relação ao navbar-light
— botbot
1

Como alternativa, você sempre pode tentar uma solução alternativa mais simples, usando outro ícone, por exemplo: 

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

ref: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp 

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

ref: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

Assim, você ganha controle total sobre sua cor e tamanho:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

insira a descrição da imagem aqui

( o estilo do botão aplicado é apenas para um teste rápido ):

— Igor Parra
fonte
1

Ícone da barra de navegação de bootstrap padrão

<span class="navbar-toggler-icon"></span>

Adicionar ícone impressionante de fonte e remover class="navbar-toggler-icon"

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

— Md. Rana
fonte
0

Verifique a melhor solução para navegação de hambúrguer personalizado.

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>
Expandir trecho

imagem de demonstração

— habibullah khan
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.