2

Quiero trabajar con este span (navbar-toggler-icon) en bootstrap 4. Quiero cambiarle el color tanto al marco como a las líneas. ¿Cómo podría hacerlo?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav nav-pills nav-fill">
      <li class="nav-item">
        <a href="index.html" class="nav-link active ml-1 mr-1">Inicio</a>
      </li>
      <li class="nav-item">
        <a href="conocenos.html" class="nav-link active ml-1               
      mr-1">Conócenos</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle active ml-1 mr-1" href="servicios.html" id="navbarDropdownMenuLink" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Servicios</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="clasescachorros.html">Clases de 
        cachorros</a>
          <a class="dropdown-item" href="adiestramiento.html">Adiestramiento 
        básico y avanzado</a>
          <a class="dropdown-item" href="perrosbusqueda.html">Perros de 
        búsqueda</a>
          <a class="dropdown-item" href="malasconductas.html">Modificacion de 
        malas conductas</a>
          <a class="dropdown-item" href="cursos.html">Cursos</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle active ml-1 mr-1" href="galeria.html" id="navbarDropdownMenuLink" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Galería</a>
        <div class="dropdown-menu" aria- labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="fotos.html">Fotos</a>
          <a class="dropdown-item" href="videos.html">Vídeos</a>
        </div>
      </li>
      <li class="nav-item">
        <a href="contacto.html" class="nav-link active ml-1 mr-
      1">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

1
  • Hola Marcos. Al codigo que has añadido vas a tener que poner las referencias a bootstrap. Al editar la pregunta, abajo del todo tendrás un "editar este fragmento de código" y luego añades la etiqueta <script> para la referencia. Un saludo
    – lois6b
    Commented el 22 ene. 2018 a las 10:32

1 respuesta 1

2

Para cambiar el color del marco (el cuadrado) la clase es .navbar-toggler, entonces puedes cambiar el color de fondo y el borde de la siguiente manera (podrías hacerlo más genérico solamente con .navbar-toggler pero podrías tener problemas de especificidad):

.navbar-light .navbar-toggler {
  background-color: #007bff;
  border-color: rgba(255, 0, 0, 0.85);
}

Luego mirando el código de las barras en el CSS, se está usando una imagen SVG inline, entonces para cambiar el color podrías copiar el estilo CSS y cambiar el color de las líneas (cambiando el valor de stroke). La clase es .navbar-toggler-icon (podrías hacerla más genérica como indicaba arriba):

.navbar-light .navbar-toggler  .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

Aquí puedes ver un ejemplo funcionando, el botón cambia de blanco con las líneas grises a azul con las líneas blancas:

.navbar-light .navbar-toggler {
  background-color: #007bff;
  border-color: rgba(255, 0, 0, 0.85);
}

.navbar-light .navbar-toggler  .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md navbar-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data- target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="nav nav-pills nav-fill">
      <li class="nav-item">
        <a href="index.html" class="nav-link active ml-1 mr-1">Inicio</a>
      </li>
      <li class="nav-item">
        <a href="conocenos.html" class="nav-link active ml-1               
      mr-1">Conócenos</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle active ml-1 mr-1" href="servicios.html" id="navbarDropdownMenuLink" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
      Servicios</a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="clasescachorros.html">Clases de 
        cachorros</a>
          <a class="dropdown-item" href="adiestramiento.html">Adiestramiento 
        básico y avanzado</a>
          <a class="dropdown-item" href="perrosbusqueda.html">Perros de 
        búsqueda</a>
          <a class="dropdown-item" href="malasconductas.html">Modificacion de 
        malas conductas</a>
          <a class="dropdown-item" href="cursos.html">Cursos</a>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle active ml-1 mr-1" href="galeria.html" id="navbarDropdownMenuLink" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Galería</a>
        <div class="dropdown-menu" aria- labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="fotos.html">Fotos</a>
          <a class="dropdown-item" href="videos.html">Vídeos</a>
        </div>
      </li>
      <li class="nav-item">
        <a href="contacto.html" class="nav-link active ml-1 mr-
      1">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.