El color del conmutador de hamburguesa se puede cambiar en Bootstrap 4 usando 2 métodos:
Método 1: usar las clases de color incorporadas
El color del conmutador de hamburguesas está controlado por las dos clases incorporadas que se usan para cambiar el color del contenido en la barra de navegación:
- .navbar-light: esta clase se usa para establecer el color del contenido de la barra de navegación en oscuro. Cambiará el icono del conmutador para que tenga líneas más oscuras.
- .navbar-dark: esta clase se usa para establecer el color del contenido de la barra de navegación en claro. Cambiará el icono del conmutador para que tenga líneas blancas.
Nota: El nombre parece un poco al revés. ¿No debería ser .navbar-dark para oscurecer el contenido y .navbar-light para aclararlo? -dark y -light representan el color del fondo, no del contenido de la barra de navegación.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> How to change Hamburger Toggler color in Bootstrap ? </title> <!-- Include Bootstrap CSS --> <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-light bg-lignt"> <a href="/" class="navbar-brand"> Light Toggler </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#nav1"> <span class="navbar-toggler-icon my-toggler"> </span> </button> <div class="navbar-collapse collapse" id="nav1"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> </div> </nav> <nav class="navbar navbar-dark bg-dark"> <a href="/" class="navbar-brand"> Dark Toggler </a> <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#nav2"> <span class="navbar-toggler-icon"> </span> </button> <div class="navbar-collapse collapse" id="nav2"> <ul class="navbar-nav mx-auto"> <li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> </ul> </div> </nav> <div class="container"> <h1 style="color: green"> GeeksforGeeks </h1> <b>How to change Hamburger Toggler color in Bootstrap ?</b> <p>The above togglers use the default color classes available for toggler.</p> </div> <script src= "https://code.jquery.com/jquery-3.2.1.slim.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"> </script> </body> </html>
Producción:
Método 2: crear una clase personalizada para el alternador
Bootstrap usa una imagen SVG para representar el conmutador. Se pueden crear nuevos datos de imagen con colores modificados en las líneas dentro del icono. La propiedad de trazo dentro de los datos de la imagen se usa para representar el color en valores RGB. Este valor se modifica al color requerido.
Este nuevo ícono se usa en la clase .navbar-toggler-icon con la imagen de fondo para que el ícono incorporado se reemplace con este nuevo ícono de alternancia.
/* Cambiar el color en la propiedad de trazo de los datos de la imagen */
.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(0, 128, 0, 0.8)’ stroke-width=’2′ stroke-linecap =’redondo’ carrera-límite de inglete=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
}
El color del borde del conmutador se establece especificando la propiedad border-color con el color requerido.
/* Set the border color to the desired color */
.custom-toggler.navbar-toggler {
border-color: lightgreen;
}
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>How to change Hamburger
Toggler color in Bootstrap ?</title>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<style>
/* Set the border color */
.custom-toggler.navbar-toggler {
border-color: lightgreen;
}
/* Setting the stroke to green using rgb values (0, 128, 0) */
.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(0, 128, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a href="/" class="navbar-brand">Custom Toggler</a>
<button class="navbar-toggler ml-auto custom-toggler"
type="button"
data-toggle="collapse"
data-target="#nav3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="nav3">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h1 style="color: green">GeeksforGeeks</h1>
<b>How to change Hamburger Toggler color in Bootstrap ?</b>
<p>The above togglers use the a custom classe for the toggler.</p>
</div>
<script src=
"https://code.jquery.com/jquery-3.2.1.slim.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js">
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA