Bootstrap 4 Cambiar el color del conmutador de hamburguesa

125

Tengo un sitio web de arranque en el que se agrega el conmutador de hamburguesas cuando el tamaño de la pantalla es inferior a 992px. El código es así:

<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 la posibilidad de cambiar el color del botón alternador de hamburguesas?

css  twitter-bootstrap  bootstrap-4 
— Rehan
fuente
2
El código no se ejecuta como está en bootply
— Jordan.JD
No es realmente una respuesta, pero puede jugar con el icono de alternancia de la barra de navegación en advertentiekracht.nl/togglerIcon.html . El icono de alternancia de arranque se usa como un elemento de estilo externo en lugar de hacer referencia a la hoja de estilo de arranque. También se explica cómo gestionar eso.
— ben Thijssen

Respuestas:

245

La navbar-toggler-icon(hamburguesa) en Bootstrap 4 usa un SVG background-image. Hay 2 "versiones" de la imagen del icono del conmutador. Uno para una barra de navegación clara y otro para una barra de navegación oscura ...

  • Úselo navbar-darkpara un alternador claro / blanco en fondos más oscuros
  • Úselo navbar-lightpara un alternador oscuro / gris en fondos más 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;..");
}

Por lo tanto, si desea cambiar el color de la imagen del conmutador por otro, puede personalizar el icono. Por ejemplo, aquí configuro el valor RGB en rosa (255,102,203). Observe el stroke='rgba(255,102,203, 0.5)'valor en los datos 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);
}

Demostración http://www.codeply.com/go/4FdZGlPMNV

OFC, otra opción para usar un ícono de otra biblioteca, es decir: Font Awesome, etc.

Actualice Bootstrap 4.0.0:

A partir de Bootstrap 4 Beta, navbar-inverseahora se navbar-darkusa en barras de navegación con colores de fondo más oscuros para producir enlaces más claros y colores de alternancia.

Cómo cambiar los colores de la barra de navegación de Bootstrap 4

— Zim
fuente
2
En Bootstrap 4 beta 1 no hay .navbar-inverseclase. puede elegir entre dos clases: .navbar-lighto .navbar-dark.
— Qrzysio
55

Use un ícono de fuente impresionante como ícono predeterminado de su barra de navegación.

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

O pruebe esto en versiones antiguas de fuentes impresionantes:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
— Amirreza Mohammadi
fuente
3
Para fontawesome 5 use barras. fontawesome.com/icons/bars?style=solid
— Murtaza Bhurgri
Es la mejor idea.
— Shiva Manhar
7

Puede crear el botón alternador con CSS solo de una manera muy fácil, no es necesario utilizar ninguna fuente en SVG o ... foramt.

Tu botón:

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

Su estilo de botón:

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

}

Su estilo de línea horizontal:

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

}

Manifestación

.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 fragmento

— Ghafor Sabury
fuente
5

simplemente inserte la clase navbar-darko navbar-lighten el elemento de navegación:

<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
fuente
4

La forma más fácil es reemplazar este código de arranque predeterminado:

<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 esto :

<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>

Y no olvide agregar este código también a su archivo:

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

¡¡Espero eso ayude!!

— Prateek Gupta
fuente
3

Si descargó bootstrap, vaya a bootstrap-4.4.1-dist / css / bootstrap.min

yo. encuentra el .navbar-light .navbar-toggler-icono el .navbar-dark .navbar-toggler-iconselector

ii. seleccione el atributo de imagen de fondo y su valor. El fragmento tiene este aspecto:

.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 fragmento

iii. copia el fragmento y pégalo en tu CSS personalizado

iv. cambie el stroke=’rgba(0,0,0,0.5)’valor a su valor rgba preferido

— Eyoab
fuente
2

EDITAR: ¡mi mal! Con mi respuesta, el icono no se comportará como un conmutador. En realidad, se mostrará incluso cuando no esté contraído ... Aún buscando ...

Esto funcionaría:

<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>

El truco propuesto por mi respuesta es reemplazar el navbar-togglercon una clase de botón clásica btny luego, como se respondió anteriormente, usar una fuente de icono.

Tenga en cuenta que si lo mantiene <button class="navbar-toggler">, el botón tendrá una forma "extraña".

Como se indica en esta publicación sobre github , bootstrap usa algunos "trucos css", por lo que los usuarios no tienen que depender de las fuentes.

Entonces, simplemente no use la "navbar-toggler"clase en su botón si desea usar una fuente de icono.

Salud.

— stockersky
fuente
Esto solo "funciona" si usa Font Awesome que no es parte de Bootstrap
— Zim
Supongo que debes eliminar el comentario sobre la respuesta de Amirreza Mohammadi de la lista. Gracias.
— NoChance
2

Acabo de desarrollar una solución considerablemente más sencilla. (Sí, sé que esta es una pregunta antigua, pero alguien que esté investigando este mismo problema puede encontrarlo útil).

Estaba usando un SVG llamado hamburger.svg. Lo miré con un editor de texto y no pude encontrar nada que estableciera un color para las tres líneas; supongo que el valor predeterminado es negro porque ese es ciertamente el comportamiento que obtengo, así que simplemente agregué un parámetro de "trazo" a la definición del SVG. Eso no funcionó MUY BIEN - los bordes de las tres líneas eran mi color elegido (blanco) pero el resto de la línea todavía era negro, así que agregué un parámetro de "relleno" también. ¡Y eso funcionó!

Aquí está el código para el hamburger.svg original en su totalidad:

<?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>

Y aquí está el código para el nuevo SVG después de editarlo y guardarlo 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 puede ver si se desplaza hacia la derecha, todo lo que hice fue agregar: 

stroke="white" fill="white"

hasta el final del camino. La otra cosa que tuve que hacer fue cambiar el nombre del archivo de la hamburguesa en el HTML. No hay que jugar con el CSS y no es necesario buscar otro icono.

¡Tranquilo! Puedes imitar esto para hacer tu hamburguesa del color que quieras.

— Enrique
fuente
1

Si trabaja con la versión sass de bootstrap _variables.scss, puede encontrar $navbar-inverse-toggler-bgo $navbar-light-toggler-bgdónde puede cambiar el color y el estilo de su botón de alternancia.

En html tienes que usar navbar-inverseo navbar-lightdependiendo de la versión que quieras usar.

— nedeco
fuente
no funciona en bootstrap 4 con respecto a navbar-light
— botbot
1

Como alternativa, siempre puede probar una solución alternativa más sencilla, utilizando otro icono, por ejemplo: 

<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

De modo que obtiene un control total sobre su color y tamaño:

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

ingrese la descripción de la imagen aquí

( el estilo del botón aplicado es solo para una prueba rápida ):

— Igor Parra
fuente
1

Icono predeterminado de la barra de navegación de bootstrap

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

Agregar icono de Font Awesome y quitar class="navbar-toggler-icon"

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

— Md. Rana
fuente
0

Compruebe la mejor solución para navegación personalizada para hamburguesas.

@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 fragmento

imagen de demostración

— habibullah khan
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.