Saltar al contenido

Bootstrap 4 Cambiar el color del conmutador de hamburguesa

Por fin después de tanto luchar ya hallamos la respuesta de esta interrogante que agunos usuarios de este espacio tienen. Si deseas compartir algún detalle puedes compartir tu comentario.

Solución:

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

  • Usar navbar-dark para alternar claro/blanco sobre fondos más oscuros
  • Usar navbar-light para alternar oscuro/gris sobre 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 a otra cosa, puede personalizar el icono. Por ejemplo, aquí configuro el valor RGB en rosa (255,102,203). Observe la 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);
 

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

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


Actualizar Bootstrap 4.0.0:

A partir de Bootstrap 4 Beta, navbar-inverse es ahora navbar-dark para usar 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

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

   
    

O intente esto en versiones antiguas de fuentes increíbles:

   
    

solo inserta la clase navbar-dark o navbar-light en el elemento de navegación:


Recuerda que tienes concesión de comentar si topaste tu inconveniente .

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *