Is it possible to create a collapsible navbar in my code that will automatically collapse when viewed on mobile devices? I have attempted to add a button and set it to false, but the navbar does not display on either desktop or mobile. Below is the code I am currently using to display the navbar:
<nav class="navbar navbar-default navbar-cls-top navbar-expand-sm " role="navigation">
<div class="navbar-header">
<a class="navbar-brand">AREZOU Intrade</a>
<button class="navbar-toggler bg-white" type="button" data-toggle="collapse" data-target=".dual-collapse" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="navbar-collapse dual-collapse collapse">
<ul class="navbar-nav d-sm-none">
<li class="nav-item">
<a class="nav-link active-menu ukuran" href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle ukuran" id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a>
<div class="dropdown-menu">
<a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a>
<a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a>
<a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link active-menu ukuran" href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
</li>
</ul>
</div>