I've experimented with basic Bootstrap in order to create a toggle menu, but I'm encountering issues. The menu collapses instead of expanding when the screen size is maximized ('m'). Furthermore, clicking on the toggle icon does not cause it to expand as expected.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefdfaab1afb1ad">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"></link>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a647a66">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<title>Bootstrap</title>
</head>
<body>
<div class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a href="" class="navbar-brand">NinjaXeries</a>
<button
class="navbar-toggler"
data-toggle="collapse"
data-bs-target="#ccs"
>
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="ccs">
<ul class="navbar-nav">
<li class="nav-item"><a href="" class="nav-link">Home</a></li>
<li class="nav-item"><a href="" class="nav-link">Price</a></li>
<li class="nav-item"><a href="" class="nav-link">General</a></li>
<li class="nav-item"><a href="" class="nav-link">Galle</a></li>
</ul>
</div>
</div>
</div>
<div class="container mt-3">
<div class="row">
<div class="col-12 ">
<h1 class="text-center">Our Destination</h1>
<p class="text-center lead">Let's Go</p>
</div>
</div> <!--row-->
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-4 col-xl-2 col-xxl-2">
<h1 class="text-center">Berlin</h1>
[…]
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8a908b89809f868091dcbfcfbfcfecffa2bdadaba2bdafabfdcace">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>