Javascriptで作成したハンバーガーメニューが動かないこととページがスクロールしなくなってしまいました。

問題1
Javascriptで作成したハンバーガーメニューが動かなくて困っています。
何が問題なのかわかりませんでした、。
私なりに考えたことはuser_signed inの記述によって要素が重なってしまっていることなのかなと考えましたがz-indexをかけても変わりませんでした、

問題2
ページをしたにスクロールできなくなってしまいました、こちらの問題に関して自分の仮説検証は
cssのbody内にoverflow:hidden;が書かれていることが原因なのではと考え確認しましたがそのような記述もなく何が問題なのか特定できませんでした。、、

これらの問題を解決できる方何卒ご教授いただけたらと思います。
よろしくお願いいたします。

index.html.erbになります。
  
 <header>

   <title>swapapp</title>
   <p>あなたの欲しいがきっと見つかる</p>

   <% if user_signed_in? %>
   <div class="message">
     <%= "#{current_user.nickname} is already logged in." %>
     <%= link_to "Logout", destroy_user_session_path, method: :delete %>
   </div>

   <%= link_to root_path do %>
   <%= image_tag 'note-pencil.jpeg' ,class: "link-category1"%>
   <% end %>

   <% else %>
   <div class="message">
     <%= link_to "Create your account!", new_user_registration_path %>
   </div>
   <div class="message">
     <%= link_to "Login", new_user_session_path %>
   </div>

 </header>

 <div class="trigger-container">
 </div>

 <!-- ナビメニュー -->
 <nav id="nav">
   <ul>
     <li><a href="#">SUMPLE1</a></li>
     <li><a href="#">SUMPLE2</a></li>
     <li><a href="#">SUMPLE3</a></li>
   </ul>
 </nav>

 <!-- ハンバーガーメニュー
 のアイコン -->
 <div id="hamburger">
   　
   <!-- 1番上の線 -->
   <span class="inner_line" id="line1"></span>
   　
   <!-- 真ん中の線 -->
   <span class="inner_line" id="line2"></span>
   　
   <!-- 1番下の線 -->
   <span class="inner_line" id="line3"></span>
 </div>

 <div class="top-image-container">
 </div>
 <!--<%= link_to root_path do %>
 <%= image_tag '' ,class: "link-category1"%>
 -->
 <% end %>
 <% end %>

index.cssになります。
header{
  z-index:1;
}

body{
  color: #505962;
  font-family: 'Noto Sans JP', sans-serif;
}

.top-image-container {
    width: 100%; /*幅いっぱい!の時は100%*/
    height: 100vh;/*画面に対しての高さ*/
    background: url("for-swapapp.jpg") no-repeat center/cover;
    z-index:0;
}

.message {
position:relative;
text-align-last: end;
font-family: fantasy;
float
}
.message a {
  text-decoration: none;
  color: #000000;
}

h2 {
text-align-last: center;
}

.form-text-wrap {
  width: 100%;
  margin:0 auto;
}

.form-text-wrap select{
  display: flex;
  margin: 0 auto;
}

.input-birth-wrap p{
position :center;
}

.birthday{
  margin: 0 auto;
}

.actions {
  text-align: center;
  margin: 10px;
}

.icon-image1 {
width: 15%;
height: 15%;
}

.link-category1 {
  position:relative;
  width: 15%;
  height: 15%;
}

.top-image-container img{
 max-width:100%;
 width:85%;
 max-height: 95%;
 object-fit: cover;
}

.trigger-container {
  width:100%;
  height:;
}

/*以下ハンバーガーメニューのcss*/

/*ページ全体とヘッダー部*/
* {
  margin: 0;
  padding: 0;
  }
body {
  /*ページ全体の背景色*/
  background: #b4ada9;
}
header {
  /*ヘッダーを固定*/
  position: fixed;
  width: 100%;
  height: 90px;
}

/*以下ナビメニュー*/
#nav{
  position: absolute;
 top: 0;
/*ナビメニューを左に隠した状態になる*/
  left: -40%;
  width: 40%;
  height: 100vh;
  background: #ffffff;
 /*０.7秒かけてナビメニューがスライドする*/
  transition: .7s;
}
#nav ul{
  padding-top: 80px;
}
#nav ul li{
  list-style-type: none;
  font-size: 20px;
}
#nav a{
  display: block;

  text-decoration: none;
  color: #000000;
  margin: 0 15px;
  padding: 10px;
  transition: .5s;
}
#nav li a:hover{
  color: #ffffff;
  background: #cd5c5c;
  border-bottom: none;
}

/*ハンバーガーメニューのアイコン*/
#hamburger {
  display: block;
  position: absolute;
  top: 20px;
  left: 30px;
  width: 50px;
  height: 44px;
  cursor: pointer;
  transition: 1s;
}

/*線の縦幅色など*/
.inner_line {
  display: block;
  position: absolute;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #ffffff;
  transition: 1s;
  border-radius: 4px;
}

/*ハンバーガーの横線*/
#line1 {
  top: 0;
}
#line2 {
  top: 20px;
}
#line3 {
  bottom: 0px;
}

/*ハンバーガーメニューの動き*/
.in{
  transform: translateX(100%);
}
.line_1,.line_2,.line_3{
  background: #000000;
}
.line_1 {
/*-45度回転させる*/
  transform: rotate(-45deg);
  top: 0;
}
.line_2 {
  opacity: 0;
}
.line_3 {
/*45度回転させる*/
  transform: rotate(45deg);
  bottom: 0;
}

index.jsになります。

// Load all the channels within this directory and all subdirectories.
// Channel files must be named *_channel.js.

const channels = require.context('.', true, /_channel.js$/)
channels.keys().forEach(channels)

//ハンバーガーボタンの動き
function hamburger() {
  document.getElementById('line1').classList.toggle('line_1');
  document.getElementById('line2').classList.toggle('line_2');
  document.getElementById('line3').classList.toggle('line_3');
  document.getElementById('nav').classList.toggle('in');
}
document.getElementById('hamburger').addEventListener('click' , function () {
  hamburger();
} );