Has abierto un elemento li
pero no lo has cerrado.
Observa en tu código la parte que dice <li class="nav-item dropdown">
.
Eso te está descuadrando el código, y por eso no se comporta como debería. Y también por eso se te descuadran el resto de elementos como dices.
Además, deberías tener en cuenta que ya se ha lanzado Bootstrap 5 y los atributos data
llevan un -bs-
. Si estás creando algo nuevo deberías usar la versión 5 de Bootstrap, ya que viene con grandes ventajas.
Código arreglado:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" 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>
<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">HOME <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="index.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
GET TO KNOW MORE ABOUT ME
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="html/about-me.html">ABOUT ME</a>
<a class="dropdown-item" href="html/technologies.html">TECHNOLOGIES</a>
<a class="dropdown-item" href="html/soft-skills.html">SOFT SKILLS</a>
<a class="dropdown-item" href="html/languages.html">LANGUAGES</a>
<a class="dropdown-item" href="html/values.html">VALUES</a>
<a class="dropdown-item" href="html/behavioral-questions.html">BEHAVIORAL QUESTIONS</a>
<a class="dropdown-item" href="html/academic-background.html">ACADEMIC BACKGROUND</a>
<a class="dropdown-item" href="html/professional-experience.html">PROFESSIONAL EXPERIENCE</a>
<a class="dropdown-item" href="html/entrepreneurship-experience.html">ENTREPRENEURSHIP EXPERIENCE</a>
<a class="dropdown-item" href="html/faq.html">FAQ</a>
</div>
</li>
</ul>
</div>
</nav>