bootstrapのnavメニューを実装して、ハンガーメニューが閉じない

前提・実現したいこと

bootstrapのnavメニューを実装して、ハンガーメニューが閉じない原因が分かりません。

発生している問題・エラーメッセージ

ハンガーメニューが閉じない

該当のソースコード

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
10    <link rel="stylesheet" href="css/custom.css">
11    <link rel="preconnect" href="https://fonts.gstatic.com">
12    <!--googleフォントのサイトからlinkとfont-familyをコピーする-->
13    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap" rel="stylesheet">
14    <!--font AwesomeのサイトからCopy Kit Codeより取得-->
15    <script src="https://kit.fontawesome.com/5136400a27.js" crossorigin="anonymous"></script>
16
17    <title>Corporatesite</title>
18  </head>
19  <body>
20      <!--はじめの操作
21    1.custom.cssが読み取れているか、h1のカラーを変えるなどして確認
22    2．bootstrapが読み取れているか確認する
23    -->
24    <!-- Optional JavaScript -->
25    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
26
27    <header>
28        <div class="top-img">
29            <div class="top-text">
30                <h1>Corporate Site</h1>
31                <p>会社情報を伝えるサイトです。</p>
32            </div>
33        </div>
34    </header>
35    <!-- テスト -->
36    <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
37      <div class="container-fluid">
38        <a class="navbar-brand" href="#">Navbar</a>
39        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
40          <span class="navbar-toggler-icon"></span>
41        </button>
42        <div class="collapse navbar-collapse" id="navbarNav">
43          <ul class="navbar-nav">
44            <li class="nav-item">
45              <a class="nav-link active" aria-current="page" href="#">Home</a>
46            </li>
47            <li class="nav-item">
48              <a class="nav-link" href="#">Features</a>
49            </li>
50            <li class="nav-item">
51              <a class="nav-link" href="#">Pricing</a>
52            </li>
53            <li class="nav-item">
54              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
55            </li>
56          </ul>
57        </div>
58      </div>
59    </nav>
60・・・
61
62    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
63
64    <!-- Option 2: Separate Popper and Bootstrap JS -->
65    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
66    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
67  </body>

CSS
1*{
2    /*margin,paddingの設定は、bootstrapにはないので入れておく*/
3    margin: 0;
4    padding: 0;
5    color: white;
6}
7
8.top-img{
9    background-image: url(../img/img01.jpg);
10    /*背景画像が繰り返さないようにする*/
11    background-size: cover;
12    /*画像を固定して、文字が動くようになる*/
13    background-attachment: fixed;
14}
15
16.top-text{
17    text-align: center;
18    padding: 250px 0px;
19}
20
21.top-text h1{
22    font-size: 100px;
23    font-family: 'Dancing Script', cursive;
24}
25
26nav h3{
27    font-family: 'Dancing Script', cursive;
28    color: black;
29}
30
31nav i{
32    /*Homeのアイコンの色*/
33    color:#888;
34}
35
36.night-sky{
37    background-image: url(../img/fix-bg.jpg);
38    background-size: cover;
39    padding: 200px 0;
40    text-align: center;
41    background-attachment: fixed;
42}
43
44.night-sky h2{
45    font-size: 80px;
46    font-family: 'Dancing Script', cursive;
47    margin-bottom: 40px;
48}
49
50.service-list{
51    background-color: black;
52    text-align: center;
53    padding: 50px;
54}
55
56.service-list h2{
57    font-size: 80px;
58    font-family: 'Dancing Script', cursive; 
59}
60
61.service-description{
62    padding: 30px;
63}
64
65.Info{
66    border:solid 2px white;
67    margin: 20px;
68    padding: 20px;
69}
70
71.Info p{
72    padding: 10px;
73}
74
75footer{
76    background-color: #333;
77    /*marginにしてしまうと白の空白ができてしまう*/
78    padding: 30px;
79}
80
81footer ul li{
82    /*リストの●を消す*/
83    list-style: none;
84}
85
86footer ul li a{
87    /*footerは目立たせる必要がない*/
88    color: #aaa;
89    font-size: 13px;
90}
91
92/*hoverしたときに、白色、リンクの下線を無くす*/
93footer ul li a:hover{
94    color: white;
95    text-decoration: none;
96}
97
98footer p{
99    text-align: right;
100}
101
102/**/