モバイルメニューをスモールする小さな問題

Question

私はクライアントのウェブサイトのモバイルメニューをスタイリングするのにうってつけの仕事をしていますが、モバイルメニューの後ろにロゴセクションとハンバーガーボタンを持ってくるようにコーディングする問題があります。

したがって、ユーザーがハンバーガーボタンをクリックすると、ロゴセクションとハンバーガーボタンは表示されません。

私はすでにZインデックスを作成しましたが、機能しません。ここにサイトへのリンクがありますので、メニューを見るために画面のサイズを変更し、javacriptが一切ありません& jqueryが現時点でサイトに追加されています。

サイトプレビュー： https://brandonpowell.github.io/alegacyleftbehind/

@media (max-width: 480px){ 
    nav{ 
    height:100%; 
    width:100% 
    } 
    nav .bottom-navbar{ 
     background-color:#212121 
    } 
    nav .bottom-navbar .logo{ 
     position:absolute 
    } 
    nav .bottom-navbar .bt-close{ 
     position:absolute; 
     background-color:#51237f; 
     padding:9px; 
     display:block; 
     top:0; 
     width:100% 
     } 
     nav .bottom-navbar .bt-close .close-image{ 
     width:50px; 
     padding:10px; 
     float:right; 
     } 
     nav .bottom-navbar .bt-close .main-title{ 
      color:white; 
      padding:20px 10px; 
      text-transform:uppercase; 
      font-size:13pt;font-family:Montserrat,sans-serif; 
      letter-spacing:1px 
      } 
      nav .bottom-navbar .nav-menu{ 
      display:block;width:34px;margin:36px;float:right 
      } 
      nav ul li{ 
      float:none; 
      display:block; 
      letter-spacing:1px; 
      padding:1.9em 15px; 
      border-bottom:2px solid #2e2e2e;width:100% 
      } 
      nav ul li a{ 
       color:white; 
       font-size:1.6em 
       } 
       li:hover{ 
       background-color:#2e2e2e; 
       text-decoration:none; 
       color:#ffffff 
       } 
       ul{ 
       padding-left:0px; 
       margin:0; 
       } 

} 

Answer 1

あなたは0に彼らの不透明度を変更し、noneにそのポインタイベントを設定する代わりに、メニューの後ろにそれを隠すためにしようと考えていますか？

視覚的には同じ効果があり、両方にクラスを追加することでjQueryでトリガーできます。そのクラスのCSSコードは、次のようになります。

.hidestuff{ 
opacity:0; 
pointer-events:none; 
} 

このクラスを削除すると、表示とクリックが可能になります。これには、CSSトランジションを使用してフェードインまたはフェードインできるという追加の利点があります。

アンディ