I'm facing an issue with my navbar menu items overlapping on top of each other.
https://i.sstatic.net/dEEpx.png
What could be the reason behind this?
Codepen Link:
https://codepen.io/ogonzales/pen/mdeNNLB
Code Snippet:
<nav class="navbar navbar-expand-md navbar-light fixed-top" style="height: 70px;" id="top-navbar">
<img src="" alt="Ministerios Elim" width="2%" height="50%"/>
<a class="navbar-brand" href="" style="margin-right: 5%;"><span style="margin-left: 3%;">Ministerios Elim</span></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul>
<li>
<a href="/">Home</a>
</li>
{% for item in navigation.menu_items.all %}
<li>
<a href="{{ item.link }}" class="nav-link" {% if item.open_in_new_tab %} target="_blank" {% endif %}>{{ item.title }}</a>
</li>
{% endfor %}
</ul>
<form class="form-inline ml-auto">
<a href="" class="btn btn-outline-secondary">Ingresar</a>
<a href="" class="btn btn-primary ml-2">Registro</a>
</form>
</div>
</nav>