Responsive Top Bar - Copy this Html, Tailwind Component to your project
Dame un top bar mejorado <header class="text white p 3 fixed top" style="background color: #CA0022; z index: 9999;"> <div class="container"> <div class="row"> <! Fila 1 > <! Contenedor 1: Logo > <div class="col auto" style="display: grid; place items: center; padding: 0;"> <a href="index.html"> <img src="/static/assets/img/logo blanco.png" alt="La Elegida" style="width: 150px; height: auto;"> </a> </div> <! Contenedor 2: Botón de usuario y menú hamburguesa > <div class="col auto" id="buttonContainer" style="margin left: auto; padding: 0; display: grid; grid template columns: repeat(2, auto);"> <button class="btn btn outline light me 2 mb 0" type="button" id="profileButton" style="height: 38px; margin: 0;"> <i class="fas fa user"></i> </button> <script> document.getElementById('profileButton').onclick = function() { window.location.href = 'login register.html'; }; </script> <button id="menuToggle" class="btn btn outline light mb 0" type="button" style="height: 38px; margin: 0;"> <i class="fas fa bars"></i> </button> </div> </div> <div id="hamburgerMenu" class="offcanvas offcanvas end" tabindex=" 1" style="background: rgba(255, 255, 255, 0.8); backdrop filter: blur(10px);"> <div class="offcanvas header" style="background color: rgba(255, 255, 255, 0.8); color: #000000;"> <h5 class="offcanvas title">Menú</h5> <button type="button" class="btn close text reset" data bs dismiss="offcanvas" aria label="Close"></button> </div> <div class="offcanvas body" style="display: grid; grid template columns: 1fr; gap: 10px;"> <ul class="nav flex column"> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Mi cuenta</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Ofertas</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Lo Nuevo</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Abarrotes y Despensas</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Carnes</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Lácteos y Derivados</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Bebidas y Licores</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Frutas y Verduras</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Hogar</a></li> <li class="nav item"><a class="nav link menu link" href="#" onclick="setActive(this)">Snack y confiterías</a></li> </ul> </div> </div> <style> .menu link { color: #F18F00; /* Color naranja */ transition: color 0.3s ease; /* Transición suave */ } .menu link:hover { color: red; /* Cambia a rojo al pasar el mouse */ } </style> <script> function setActive(link) { // Remueve la clase active de todos los enlaces const links = document.querySelectorAll('.menu link'); links.forEach(l => l.classList.remove('active')); // Agrega la clase active al enlace clicado link.classList.add('active'); } </script> <div class="row mt 2"> <! Fila 2 > <! Contenedor 3: Input de búsqueda y botón de búsqueda > <div class="col d flex align items center" style="display: grid; grid template columns: auto auto; gap: 0.5rem;"> <form class="d flex w 100"> <input class="form control" type="search" placeholder="Buscar productos..." aria label="Buscar" style="height: 38px;"> <button class="btn btn outline light" type="submit" style="height: 38px;"> <i class="fas fa search"></i> </button> </form> </div> <! Contenedor 4: Botón del carrito > <div class="col auto d flex align items center" style="display: grid; grid template columns: auto;"> <button class="btn btn outline light" type="button" id="carritoButton" style="height: 38px;"> <a href="carrito compras.html"> <i class="fas fa shopping cart" style="color: white;" onmouseover="this.style.color='black'" onmouseout="this.style.color='white'"></i> </a> </button> </div> </div> </div> </header>
