css - icon - Bootstrap 4 Cambiar el color del Toggler de hamburguesas

navbar toggler icon css

Question

Tengo un sitio web de arranque donde se agrega la Hamburger cuando la pantalla es inferior a 992 px. El código HamBurger 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>

¿Hay alguna posibilidad de cambiar el color del botón HamBurger?

Answer 1

Como alternativa, siempre puede intentar una solución más simple, 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

Entonces obtienes control total sobre su color y tamaño:

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

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

Answer 2

Comprueba la mejor solución para la navegación de hamburguesas personalizada.

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

imagen de demostración

Answer 3

El navbar-toggler-icon (hamburguesa) en Bootstrap 4 usa una background-image SVG. Hay 2 "versiones" de la imagen del icono de alternador. Una para una barra de navegación clara y otra para una barra de navegación oscura ...

• Use navbar-dark para un alternador claro / blanco en fondos oscuros
• Use navbar-light de la navbar-light para 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 de alternador a otra cosa, puede personalizar el icono. Por ejemplo, aquí configuro el valor RGB en rosa (255,102,203). Observe el valor stroke=''rgba(255,102,203, 0.5)'' 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);
} 

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

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

Actualización Bootstrap 4.0.0:

A partir de Bootstrap 4 Beta, navbar-inverse ahora es navbar-dark para usar en barras de navegación con colores de fondo más oscuros para producir enlaces más claros y colores más alternos.

Cómo cambiar los colores de Bootstrap 4 Navbar

Answer 4

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

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

Answer 5

Si trabaja con la versión sass de bootstrap en _variables.scss , puede encontrar $navbar-inverse-toggler-bg o $navbar-light-toggler-bg donde puede cambiar el color y el estilo de su botón de alternar.

En html tienes que usar navbar-inverse o navbar-light dependiendo de la versión que quieras usar.

Answer 6

simplemente inserte la clase navbar-dark o navbar-light en el elemento nav:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Answer 7

simplemente use una fuente impresionante en la etiqueta "i" en el intervalo de iconos predeterminado y luego cambie el color del icono agregado con CSS.

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon"></i>
</span>

.fa.fa-navicon {
  color:white;
}

Answer 8

EDITAR: mi mal! Con mi respuesta, el icono no se comportará como un conmutador En realidad, se mostrará incluso cuando no esté colapsado ... Todavía 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 la navbar-toggler con una clase de botón clásica btn y luego, como se respondió anteriormente, usar una fuente de icono.

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

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

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

Aclamaciones.