Por lo que veo este es el código para el interruptor-botón de navegación:

<button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

He añadido id=»nav-activar-botón» y le dio este CSS:

#nav-toggle-button {
color: gray;
}

pero nada ha cambiado. He intentado añadir !importante también, sin éxito, y no sé qué más probar. Alguien sabe?

EDIT: Aquí un violín con una solución sugerida por Prashant123 (lo siento, no es suficiente reputación para votar tu respuesta!): http://jsfiddle.net/LuKSB/1/ es mucho mejor ya, pero sería perfecto si las líneas horizontales en el interior del botón sea visible (blanco). Supongo que sería cambiar el color, pero no funciona.

  • ¿Quieres cambiar el color del texto? O el color de fondo? Debido a que el color de propiedad se aplica al color de texto, no el color de fondo.
  • Con la actualización tengo el color del fondo de la cubierta, ahora creo que es sobre el color del texto.
InformationsquelleAutor user3691280 | 2014-06-06

3 Comentarios

  1. 6

    Cambios para el Bootstrap 4

    La navbar-toggler-icon en Bootstrap 4 utiliza una SVG background-image. Hay 2 versiones de la toggler imagen de icono. Uno para luz de la navbar, y uno oscuro (inverso) navbar…

    //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-inverse .navbar-toggler-icon {
      background-image: url("data:image/svg+xml;..");
    }

    Si quieres cambiar el color de esta imagen a otra cosa, usted puede personalizar el icono. Por ejemplo, aquí he de poner el valor RGB de color de rosa (255,102,203). Aviso de 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");
    }

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

  2. 3

    probar este DEMO
    html

    <button id="nav-toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>

    css

    #nav-toggle-button{
        background-color:red;
    }
    • Gracias, ahora ha funcionado, he intentado antes sin éxito, tal vez hubo un error de tipeo. Es casi lo que quieras, aunque tengo la necesidad de líneas (icono?) en el botón blanco (ver mi editada pregunta).
    • Nuevo Bootstrap 4 utiliza svg factor de imagen para el toggler icono. Para hacer esto, por ejemplo, de blanco en lugar de gris: .navbar-light .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, 0.9)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
  3. 0

    Añadiendo a Prashant del ejemplo puede orientar el lapso de color específicamente cambiando el CSS de entrada a:

    #nav-toggle-button span {
        background-color: black;
    }

Dejar respuesta

Please enter your comment!
Please enter your name here