Я начинающий программист и почти ничего не знаю. Я пытаюсь выучить html, css и js онлайн. Я пытаюсь создать отзывчивый сайт, где меню навигационной панели сворачивается в меньших разрешениях. На данный момент значок меню подсвечивается белым цветом, когда я нажимаю на него, но не раскрывается, чтобы показать элементы.
Я использую bootstrap 3.3.6 и jquery 2.1.4 (я знаю, что он старый, но курс, по которому я учусь, использует их)
Заранее спасибо! ! (PS: Проигнорируйте содержание, имена и т. Д. c, я просто пытаюсь сделать его интересным для себя)
<!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">
<title>Gorilla Sports</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style_ch.css">
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;1,500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg" >
<div id="logo-img" ></div>
</a>
<div class="navbar-brand">
<a href="index.html"><h1>Gorilla Sports</h1></a>
<p>
<img src="Images/gorilla_small.jpg" alt="Gorilla">
<span>Gorilla</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#collapsable-nav"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hidden-xs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:+91-9910673649">
<span>+91-9910673649</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>