I'm having an issue with my navigation bar toggler. The code works fine in Codeply, but not in the browser. The hamburger button appears on mobile, but the lists are not showing up. Here is the code snippet I'm using:
<html>
<head>
<title>Practice</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b6b1e051a0518">[email protected]</a>/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">WonderWeb</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a href="" class="nav-link">Contact</a></li>
<li class="nav-item"><a href="" class="nav-link">Products</a></li>
<li class="nav-item"><a href="" class="nav-link">Payment</a></li>
</ul>
</div>
</div>
</nav>
</body>
</html>