1

No funciona el drop-down en PHP Storm, utilicé Bootstrap

Estoy trabajando en el IDE PHP Storm, y con Bootsrap 4.3, sucede que coloqué un dropdown en la navbar con un menú para el inicio de sesión y el registro de cuentas; sin embargo al iniciar la página, el dropdown no funciona.

Ya coloqué los link y scripts de Bootstrap, pero sigue sin funcionar. Me gustaría que por favor me ayuden revisando mi código y me ayuden encontrando el problema por el cual no funciona el dropdown.

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-menu {
  display: none;
  position: absolute;
  min-width: 160px;
  padding: 12px 16px;
  z-index: 1;
}

.dropdown-menu .dropdown-item:active {
  background: white;
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-light text-esencia fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <a class="navbar-brand pt-2 pb-2" href="/">
    <img src="{{asset('/img/Logo-Principal-2.png')}}" width="200" alt="Logo Esencia" title="Logo">
  </a>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav flex-grow-1">
      <li class="nav-item">
        <a class="nav-link text-light" href="/">Inicio</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="/nosotros">Nosotros</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="/precios">Precios</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light" href="/contacto">Contáctanos</a>
      </li>
    </ul>

    **
    <!--AQUÍ COLOQUÉ EL DROPDOWN-->**

    <div class="nav-item dropdown form-inline my-2 my-lg-0">
      <a class="nav-link text-light dropdown-toggle" role="button" id="dropdownNavBar" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fa-solid fa-circle-user fa-2xl"></i>
      </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
        <a class="dropdown-item text-light" href="/login">Ingresar</a>
        <a class="dropdown-item text-light" href="/registro">Regístrarme</a>
      </div>
    </div>
  </div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

1 respuesta 1

2

Creo que debes especificar de manera correcta data-target="#navbarTogglerDemo03" para que uses navarTogglerDemo03 como el id de el elemento en especifico, para que la barra se despliegue y muestre la información... He tomado tu código como referencia para un ejemplo y lo adapte un poco, espero te sirva.

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    min-width: 160px;
    padding: 12px 16px;
    z-index: 1;
}

.dropdown-menu .dropdown-item:active {
    background: white;
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
}
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>dropdown example</title>
</head>
<body style="background-color: white;">
  <nav class="navbar navbar-expand-lg navbar-light text-esencia fixed-top">
        
  <div class="container-fluid" id ="navbarTogglerDemo03">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
          </a>
          <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Inicio</a></li>
            <li><a class="dropdown-item" href="#">Nosotros</a></li>
            <li><a class="dropdown-item" href="#">Precios</a></li>
            <li><a class="dropdown-item" href="#">Contáctanos</a></li>
          </ul>
        </li>
      </ul>

    </div>
  </div>

</nav>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</html>

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.