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>