I recently attempted to implement a hamburger menu using Bootstrap on my website. After checking and adding the necessary CSS and JS files, I encountered an issue where the menu wasn't expanding as expected. I followed the example code provided on the official Bootstrap website but still couldn't get it to work properly. Any assistance in resolving this problem would be greatly appreciated.
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IDS PANEL CONFIG</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d6dbdbc0c7c0c6d5c4f4819a879a86">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<div class="pos-f-t m-3">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar bg">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div>
<h1 style="font-size:50px;">CONFIG</h1>
<p style="font-size:50px;color: crimson;">Zone report</p>
<p><strong> please wait...</strong></p>
</div>
</div>
<div class = "container"></div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4868b8b909790968594a4d1cad7cad6">[email protected]</a>/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>