I am facing an issue with the dropdown within the Navbar collapse. I want to implement a smooth animation for the dropdown/collapse instead of it abruptly appearing. The navbar-toggler button handles the animation perfectly, but the internal dropdown does not animate at all.
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="feather icon-menu"></i>
<div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown position-static">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="feather icon-menu"></i> Browse
</a>
<div class="dropdown-menu w-100" aria-labelledby="navbarDropdownMenuLink">
<ul>
{% for category in categories %}
<li>
<a href="{{ category.url }}" title="{{ category.prettify }} Discount Codes & Deals">{{ category.prettify }}</a>
</li>
{% endfor %}
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.vouchertoday.uk">
<i class="feather icon-tag"></i>Stores
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://www.vouchertoday.uk">
<i class="feather icon-tag"></i>Latest
</a>
</li>
</ul>
</div>
If you need a visual representation, check out this example - Click the dropdown internally.