0

Estoy usando un navbar que tome en los ejemplos de bootstrap y le hice algunos cambios minimos, lo que me pasa es que no me funciona la parte desplegable para sub-menu y tambien cuando la pagina se hace más pequeña no se despliega las opciones. Ya probe en otros navegadores, revise que esten bien colocados los JS popper, jquery y el de bootstrap. He colocado el codigo completo de HTML con Bootstrap desde la web igual que el JavaScript y Popper .

Codigo De css aplicado para los colores de letra:

*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

nav div ul li a {
    color: black;
}
nav div ul li a:hover {
    color:#efb810;
}

Codigo Html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <title>GLUCK</title>
</head>
<body>
    <!--MENU FIXED TOP-->
    <nav class="navbar navbar-brand navbar-expand-md fixed-top bg-white">        
      <div class="container">
        <button class="navbar-toggler navbar-light" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="img/logo_u.png" alt="imagen corporativa" width="35px" height="35px">
        </a>      
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="index.html">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="html/diseño.html">Diseño</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="html/sublimacion.html">Sublimación</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="html/contacto.html">Contacto</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    
    <!---Parrafos de Prueba-->
    <div class="mt-5 pt-3">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio totam soluta blanditiis vitae amet libero sequi saepe suscipit velit facere sunt cumque nam delectus odio dolore assumenda, quam iusto? Eius numquam quidem officiis, aspernatur quos sed placeat dignissimos neque sequi voluptates iste recusandae fugit eveniet aperiam facilis velit adipisci ea perferendis. Doloribus exercitationem cum, libero quam deleniti blanditiis ullam quidem ipsam modi distinctio labore sint commodi laborum itaque assumenda vero quo possimus sit magni, aperiam quisquam ad et odit aspernatur! Perspiciatis, reiciendis et. Voluptate fugiat, assumenda cupiditate, dicta doloribus laborum eius blanditiis, sint omnis quisquam eum corrupti nemo eaque esse. Doloremque, repellat natus laudantium eligendi ex sed. Eveniet dolores neque minima distinctio, adipisci cupiditate odio deserunt quasi! A nemo harum inventore velit illo quia, expedita quae et sint! Assumenda necessitatibus dolore eum velit harum quia totam iure eos in animi consectetur voluptatibus maiores facilis enim molestiae aspernatur tenetur itaque, mollitia pariatur quas sequi? Autem natus, perspiciatis nam praesentium unde nihil voluptatum est voluptates tenetur! In nam odio temporibus quis repellendus illum quae ratione ducimus est sed assumenda numquam sunt id, facilis tenetur et vero qui recusandae voluptatibus non exercitationem? Eum saepe odio ipsam sapiente laborum! Officiis vel neque blanditiis.
        </p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio totam soluta blanditiis vitae amet libero sequi saepe suscipit velit facere sunt cumque nam delectus odio dolore assumenda, quam iusto? Eius numquam quidem officiis, aspernatur quos sed placeat dignissimos neque sequi voluptates iste recusandae fugit eveniet aperiam facilis velit adipisci ea perferendis. Doloribus exercitationem cum, libero quam deleniti blanditiis ullam quidem ipsam modi distinctio labore sint commodi laborum itaque assumenda vero quo possimus sit magni, aperiam quisquam ad et odit aspernatur! Perspiciatis, reiciendis et. Voluptate fugiat, assumenda cupiditate, dicta doloribus laborum eius blanditiis, sint omnis quisquam eum corrupti nemo eaque esse. Doloremque, repellat natus laudantium eligendi ex sed. Eveniet dolores neque minima distinctio, adipisci cupiditate odio deserunt quasi! A nemo harum inventore velit illo quia, expedita quae et sint! Assumenda necessitatibus dolore eum velit harum quia totam iure eos in animi consectetur voluptatibus maiores facilis enim molestiae aspernatur tenetur itaque, mollitia pariatur quas sequi? Autem natus, perspiciatis nam praesentium unde nihil voluptatum est voluptates tenetur! In nam odio temporibus quis repellendus illum quae ratione ducimus est sed assumenda numquam sunt id, facilis tenetur et vero qui recusandae voluptatibus non exercitationem? Eum saepe odio ipsam sapiente laborum! Officiis vel neque blanditiis.
        </p>
    </div>

    <script src="js/main.js"></script>
    <!--JS BOOTSTRAP-->  
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

</body>
</html>

3
  • Ya coloque el codigo de html mayormente completo, con cambios que le hice recientemente.
    – Camilo SW
    Commented el 1 feb. 2021 a las 20:54
  • Ok, he aplicado el bootstrap desde la pagina web, pero aun falta codigo html en tu ejemplo. Por favor trata de crear el ejemplo mínimo verificable completo ??
    – Excorpion
    Commented el 1 feb. 2021 a las 21:00
  • Listo, ya coloque el html completo y el css que aplique
    – Camilo SW
    Commented el 1 feb. 2021 a las 21:09

1 respuesta 1

1

Debo partir por asumir que has agregado de mal modo el codigo de bootstrap, por lo que he retrabajo toda esa parte. Incluso en tu ejemplo has cambiado las rutas de este, por lo que este podría ser el error principal.

Cabe agregar que debes decidir si usar bootstrap 4 o 5...

*{
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

nav div ul li a {
    color: black;
}
nav div ul li a:hover {
    color:#efb810;
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GLUCK</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
  </head>

  <body>
    <!--MENU FIXED TOP-->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="img/logo_u.png" alt="imagen corporativa" width="35px" height="35px"></a>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item active">
              <a class="nav-link" href="index.html">Inicio</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="html/diseño.html">Diseño</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="html/sublimacion.html">Sublimación</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="html/contacto.html">Contacto</a>
            </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

    <!---Parrafos de Prueba-->
    <div class="mt-5 pt-3">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio totam soluta blanditiis vitae amet libero sequi saepe suscipit velit facere sunt cumque nam delectus odio dolore assumenda, quam iusto? Eius numquam quidem officiis, aspernatur quos sed placeat dignissimos neque sequi voluptates iste recusandae fugit eveniet aperiam facilis velit adipisci ea perferendis. Doloribus exercitationem cum, libero quam deleniti blanditiis ullam quidem ipsam modi distinctio labore sint commodi laborum itaque assumenda vero quo possimus sit magni, aperiam quisquam ad et odit aspernatur! Perspiciatis, reiciendis et. Voluptate fugiat, assumenda cupiditate, dicta doloribus laborum eius blanditiis, sint omnis quisquam eum corrupti nemo eaque esse. Doloremque, repellat natus laudantium eligendi ex sed. Eveniet dolores neque minima distinctio, adipisci cupiditate odio deserunt quasi! A nemo harum inventore velit illo quia, expedita quae et sint! Assumenda necessitatibus dolore eum velit harum quia totam iure eos in animi consectetur voluptatibus maiores facilis enim molestiae aspernatur tenetur itaque, mollitia pariatur quas sequi? Autem natus, perspiciatis nam praesentium unde nihil voluptatum est voluptates tenetur! In nam odio temporibus quis repellendus illum quae ratione ducimus est sed assumenda numquam sunt id, facilis tenetur et vero qui recusandae voluptatibus non exercitationem? Eum saepe odio ipsam sapiente laborum! Officiis vel neque blanditiis.
      </p>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores distinctio totam soluta blanditiis vitae amet libero sequi saepe suscipit velit facere sunt cumque nam delectus odio dolore assumenda, quam iusto? Eius numquam quidem officiis, aspernatur quos sed placeat dignissimos neque sequi voluptates iste recusandae fugit eveniet aperiam facilis velit adipisci ea perferendis. Doloribus exercitationem cum, libero quam deleniti blanditiis ullam quidem ipsam modi distinctio labore sint commodi laborum itaque assumenda vero quo possimus sit magni, aperiam quisquam ad et odit aspernatur! Perspiciatis, reiciendis et. Voluptate fugiat, assumenda cupiditate, dicta doloribus laborum eius blanditiis, sint omnis quisquam eum corrupti nemo eaque esse. Doloremque, repellat natus laudantium eligendi ex sed. Eveniet dolores neque minima distinctio, adipisci cupiditate odio deserunt quasi! A nemo harum inventore velit illo quia, expedita quae et sint! Assumenda necessitatibus dolore eum velit harum quia totam iure eos in animi consectetur voluptatibus maiores facilis enim molestiae aspernatur tenetur itaque, mollitia pariatur quas sequi? Autem natus, perspiciatis nam praesentium unde nihil voluptatum est voluptates tenetur! In nam odio temporibus quis repellendus illum quae ratione ducimus est sed assumenda numquam sunt id, facilis tenetur et vero qui recusandae voluptatibus non exercitationem? Eum saepe odio ipsam sapiente laborum! Officiis vel neque blanditiis.
      </p>
    </div>

  </body>

</html>

1
  • Gracias, me funciono las correcciones.
    – Camilo SW
    Commented el 1 feb. 2021 a las 21:27

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.