Estoy construyendo un sitio web simple con bootstrap5 (sin JS por ahora). Cuando minimizo la pantalla para que la barra de navegación se convierta en un botón de hamburguesa, quiero que cada vez que haga clic en él y aparezca el menú, el margen superior del elemento de abajo aumente para que el menú no esté escrito encima de eso.
Creo que hay una manera de hacerlo en JS, pero probé algunos métodos que no funcionaron.
Aquí un extracto de mi código:
<nav class="navbar navbar2 navbar-expand-lg navbar-light bg-white"> <div class="container-fluid"> <button class="navbar-toggler" id="button-burger" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav navbar-center2"> ......... ......... ......... ......... </nav> <div class="container-fluid nav-wrapper" id="container-below-header">Básicamente, quiero cambiar la clase del div a continuación para cambiar cada vez que hago clic en el botón. Gracias por tu ayuda !
puede usar element.classList.toggle("ClassName"); para agregar/eliminar clase al hacer clic
var element = document.querySelector(".myclass"); var someElement = document.querySelector(".otherClass"); someElement.addEventListener('click', function () { element.classList.toggle("show"); });Puede hacer esto creando dos clases.
contendrá todos los estilos cuando el botón esté activo (es decir, se haga clic)
contendrá todos los estilos cuando el botón esté inactivo.
CSS
.active{...styles when button is clicked} .inactive{ ... }JS
const button = document.getElementById(' id for that button'); button.addEventListener("click",()=>{ if(button. classList.contains(".active")){ button. classList.remove(".active"); button.classList.add(".inactive") }else{ button.classList.add(".active"); button.classList.remove(".inactive"); } })