My mobile responsive navbar is not rendering correctly on smaller screens. Check it out here:
I am using Bootstrap Material Design with Flask and this is the code snippet for my nav-bar:
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark purple">
<div class='container'>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
{% for href, id, caption in navigation_bar %}
<li{% if id == active_page %} class="active"{% endif %}>
<a class="nav-link" href="{{ href|e }}">{{ caption|e }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
I am new to working with bootstrap and unsure what I could be missing. Any suggestions or tips would be greatly appreciated!