Estoy desarrollando un pequeño sitio web para una inmobiliaria familiar que tenemos.
Tengo un gran problema con el navbar responsive de Bootstrap 5.1.3.
El caso es que el toggler (hamburguesa) no funciona. El navbar en sí no se oculta cuando esta debajo de 500px. Cuando se hace click en él, en algunos casos se retrae y en menos de 0.5 segundos se vuelve a extender y en otros casos no hace nada.
(En Desktop sí funciona bien, solo en tamaños pequeños pasa este problema)
Y en tamaños de dispositivos de 500px para abajo aproximadamente, se cae hacia abajo el toggler y el navbar.
Código:
body {
background: green !important;
}
.body_esp nav {
/*background-color: #679708;
background-color: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333);*/
background: rgb(25, 25, 25);
background: linear-gradient(0deg, rgba(25, 25, 25, 0.020045518207282953) 0%, rgba(0, 0, 0, 0.56) 55%, rgba(0, 0, 0, 1) 100%);
width: 100%;
height: 4em;
font-family: 'Inter', sans-serif;
position: absolute !important;
z-index: 2;
}
/* Logo brand */
.body_esp nav .navbar-brand img {
width: 38%;
}
/* Links (Fuente: Open Sans, Color: blanco)*/
.body_esp nav .in-navbar-lists_links {
font-family: 'Open Sans', sans-serif !important;
font-size: 97%;
}
.body_esp nav .in-navbar-lists_links a {
color: white !important;
}
.body_esp nav .in-navbar-lists_links #LoteamientosDropdown-cont a {
color: #678a21 !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- Bootstrap 5.1.3 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Metadata -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="body_esp">
<!-- Nav -->
<div id="nav-s-carousel" style="position: relative">
<!-- para que esten sobrepuestos :) -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="assets/img/nav/DF-logonormalblanco2png.png" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#InmoNav" aria-controls="InmoNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse d-flex align-items-end flex-column bd-highlight" id="InmoNav">
<ul class="navbar-nav p-2 bd-highlight in-navbar-lists_links">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#"><i class="fa-solid fa-house"></i> Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="nosotros.php"><i class="fa-solid fa-briefcase"></i> Nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="loteamientos.php"><i class="fa-solid fa-seedling"></i> Loteamientos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacto.php"><i class="fa-solid fa-envelope"></i> Contacto</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</body>
</html>
data-bs-target
es un elemento con id navbarNav. ¿Está presente ese elemento con ese id?