ローカル環境なら動くのですがサーバーでハンバーガーメニューが表示されない

ハンバーガーメニューを作ってローカルでは問題なく動き
いざサーバーにアップロードしたら、ハンバーガーメニューもない上に
リストがそのまま出てきてしまっています。
ファイルは全てアップロードしました。
もうどれだけ調べてもわからないので、どなたかお知恵をください
どうぞよろしくお願いいたします。

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

public_html/img
エラー: ソケットから読み取れません: ECONNRESET - 相手によって接続がリセットされました
エラー: サーバーから切断されました
エラー: ディレクトリリスト表示の取り出しに失敗しました

エラーメッセージ

該当のソースコード

HTML

<script src="https://kit.fontawesome.com/db90b4186e.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="stylesheet.css">
  <link rel="stylesheet" href="responsive.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <script src="js/script.js"></script>
  <script src="js/jquery.inview.min.js"></script>

</head>

CSS
1<nav>
2        <ul class="nav-menu">
3          <li class="about"><a href="#about">About</a></li>
4          <li class="skills"><a href="#skills">Skills</a></li>
5          <li class="works"><a href="#works">Works</a></li>
6          <li class="contact"><a href="#contact">Contact</a></li>
7        </ul>
8
9        <ul id="navi" class="menu">
10          <li class="about"><a href="#about">About</a></li>
11          <li class="skills"><a href="#skills">Skills</a></li>
12          <li class="works"><a href="#works">Works</a></li>
13          <li class="contact"><a href="#contact">Contact</a></li>
14        </ul>
15      </nav>
16      <div class="hamburger">
17        <span></span>
18        <span></span>
19        <span></span>
20      </div>
21    </div>
22  </header>
23

CSS
1.hamburger {
2  width: 100px;
3  height: 100px;
4  background-color;
5  position: fixed;
6  top: 0;
7  right: 0;
8  z-index: 30;
9  cursor: pointer;
10  transition: 0.3s;
11}
12.hamburger:hover {
13  opacity: 0.7;
14}
15

/* ハンバーガーメニューの線の設定（メニューが閉じている時） */
.hamburger span {
  width: 30px;
  height: 2px ;
  background:black;
  position: absolute;
  left: 25px;
  transition: 0.3s ease-in-out;
}
/* 1本目の線の位置を設定 */
.hamburger span:nth-child(1) {
  top: 36px;
}
/* 2本目の線の位置を設定 */
.hamburger span:nth-child(2) {
  top: 48px;
}
/* 3本目の線の位置を設定 */
.hamburger span:nth-child(3) {
  top: 60px;
}
/*
ハンバーガーメニューの線の設定（メニューが開いている時）
1本目の線を-45度回転
*/
.hamburger.active span:nth-child(1) {
  top: 47px;
  left: 25px;
  background :black;
  transform: rotate(-45deg);
}
/* 2本目と3本目は重ねて45度回転 */
.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
  top: 47px;
  background: black;
  transform: rotate(45deg);
}
/*
メニューの設定
最初は閉じている状態なので、「opacity: 0;」「visibility: hidden;」
で要素を非表示にしておく
*/
#navi {
  width: 100%;
  height: 20%;
  background-color: white;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  opacity: 0;
  text-align: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  visibility: hidden;
}
/*
ハンバーガーメニューがクリックされた際に、jQueryで#naviにactiveクラスを追加して、
メニューを表示させる。
*/
#navi.active {
  opacity: 1;
  visibility: visible;
}
#navi .logo {
  width: 100px;
  position: absolute;
  top: 40px;
  left: 50px;
}
#navi .menu {
  margin: 80px 0 40px 0;
}
#navi .menu li {
  margin-bottom: 20px;
}
#navi .menu a {
  color: #fff;
  font-weight: bold;
}
#navi .btn {
  width: 250px;
  border: solid 1px #fff;
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 15px 0;
  margin: 0 auto;
  position: relative;
  transition: 0.3s ease-in-out;
}

jquery
$(function(){
  /*=================================================
  ハンバーガ―メニュー
  ===================================================*/
  // ハンバーガーメニューをクリックした時
  $('.hamburger').on('click', function() {
    // ハンバーガーメニューの共通処理を呼び出す
    hamburger();
  });
  // メニューのリンクをクリックした時
  $('#navi a').on('click', function() {
    // ハンバーガーメニューの共通処理を呼び出す
    hamburger();
  });
// ハンバーガーメニューをクリックした時とメニュー内のリンクをクリックした時の
// 処理が同じなので処理を共通化する
function hamburger() {
  // toggleClassを使用することで、hamburgerクラスにactiveクラスが存在する場合は削除、
  // 存在しない場合を追加する処理を自動で行ってくれる
  $('.hamburger').toggleClass('active');

  if ($('.hamburger').hasClass('active')) {
    // hamburgerクラスにactiveクラスが存在する場合は、naviにもactiveクラスを追加する
    $('#navi').addClass('active');
  } else {
    // hamburgerクラスにactiveクラスが存在しない場合は、naviからactiveクラスを削除する
    $('#navi').removeClass('active');
  }
}

@media(max-width:780px){
  .nav-menu{
    display: none;
  }
  .figure img{
    width:100%;
  }
.about-container{
  display: block;
 text-align : center;
}
.about-container p{
  width: 100%;
  padding: 5% 10%;
}
.skills-contents {
  display: block;
}
.container {
  width: 100%;
}
}

@media(min-width:780px){
  .hamburger {
    display: none;
  }
}

試したこと

エックスサーバーにFileFile Zillaで場所はpublichtml に全てのファイルををアップロードをしました。jsはScriptフォルダにアップロードしましたが反映されてません。
jsフォルダの中にscript.jsとjquery.inview.min.jsファイルがあります
フォルダから出した方が良いのでしょうか？

画面大きくなっても隠したはずのリストが出たまま
画面小さくしてもリストが出たままハンバーガーメニューが出てきません。