ハンバーガーメニューでPC表示時にメニュー一覧が消えてしまいます。

Question

前提・実現したいこと

スマホサイズにしたときにはハンバーガーメニューがしっかりと実装できているのですが
PCサイズのときにメニュー一覧が隠れてしまいます。

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

該当のソースコード

<div class="nav-wrapper">
        <nav class="header-nav">
          <ul class="nav-list">
            <li class="nav-item"><a href="./index.html">Home</a></li>
            <li class="nav-item"><a href="#">Songs</a></li>
            <li class="nav-item"><a href="#">Contact</a></li>
          </ul>
        </nav>
      </div>

      <div class="burger-btn">
        <span class="bar bar_top"></span>
        <span class="bar bar_mid"></span>
        <span class="bar bar_bottom"></span>
      </div>
 

.nav-wrapper{      
  transform: translateX(100%);      
  transition: .3s;      
  width: 100vw;      
  height: 100vh;      
  position: fixed;      
  top: 0;      
  left: 0;      
  z-index: 2;
  }     

.header-nav{        
  width: 100%;        
  height: 100%;        
  background:rgba(162,214,214,1);        
  z-index: 2;      
}     
.header-nav .nav-list{        
  display: block;        
  position: absolute;        
  top: 50%;        
  left: 50%;        
  transform: translate(-50%,-50%);        
  text-align: center;      
}      
.header-nav .nav-item{        
  margin-right: 0;        
  margin-bottom: 40px;      
}

body.noscroll{
  overflow: hidden;
}

.nav-wrapper.slide-in{      
  transform: translateX(0);      
  transition: .3s;     
}



@media screen and (max-width:768px){
  /* ------------------ */
  /* humberger-menu */
  /* ------------------ */
  .header{
      padding: 0 5%;
  }

  .burger-btn{
    display: block;      
    width: 39px;      
    height: 39px;      
    position: relative;      
    z-index: 3;
    border:none;    
  }    
  .bar{      
    width: 20px;      
    height: 1px;        
    display: block;      
    position: absolute;      
    left: 50%;      
    transform: translateX(-50%);      
    background-color: #fff;    
  }    
  .bar_top{   
    top: 10px;
  }
  .bar_mid{    
    top: 50%;
    transform: translate(-50%,-50%);
  }
  .bar_bottom{
    bottom: 10px;
  }

  .burger-btn.close .bar_top{      
    transform: translate(-50%,10px) rotate(45deg);      
    transition: transform .3s;    
  }    
  .burger-btn.close .bar_mid{      
    opacity: 0;       
    transition: opacity .3s;    
  }    
  .burger-btn.close .bar_bottom{      
  transform: translate(-50%,-8px) rotate(-45deg);      
  transition: transform .3s;    
  }


 

$('.burger-btn').on('click',function(){
  $('.burger-btn').toggleClass('close');
  $('.nav-wrapper').toggleClass('slide-in');
  $('body').toggleClass('noscrholl');
});
 

試したこと

当サイトの既存の質問から類似のものを探したら
https://teratail.com/questions/299970
があったのでこちらを試してみましたが解決できませんでした。

補足情報（FW/ツールのバージョンなど）

使用エディタはvscodeです。

Answer 1

transform: translateX(100%)が原因だと思いますので、とりあえず下記CSSを追加すれば表示されると思います。

@media screen and (min-width:769px){
	.nav-wrapper{
		transform: none;
		width: 250px;
	}
}

Comments

[yunpla]

今晩は。回答ありがとうございます。
追加してみたのですが、改善されませんでした...涙
他に考えられる原因はありますでしょうか...？

[webgoto]

詳細度が低く上書きできていなかったようなのでdivを追加しました。
@media screen and (min-width:769px){
div.nav-wrapper{
transform: none;
width: 250px;
}
}