両方のナビゲーションが表示されます。最初のナビゲーションをクリックしたときに2番目のナビゲーションを非表示にする方法はありますか？

Question

モバイルで2つのナビゲーションバーに問題があります。最初のナビゲーションバーのアイコンをクリックすると、両方のナビゲーションが表示されます。私はCSSの可視性を試しています：アイコンをクリックするとコードなしが、私は正しい結果を得ていません。手伝ってくれませんか？

参考のため、以下の画像が添付されています。

これは2つのナビゲーションバーです。黒で1つ、白で1つ。

これは私が問題を取得しています場所です。あなたが見ることができるように、両方が出ています。

これは、ナビゲーションバー2をクリックすると起こります。これは正しいです。

ありがとうございます。ここから

Answer 1

削除可視性オプション：

.td-js-loaded .td-menu-background, .td-js-loaded #td-mobile-nav { 
    /* visibility: visible; ----- remove this */ 
    -webkit-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
    -moz-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
    -o-transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
    transition: transform 0.5s cubic-bezier(0.79, 0.14, 0.15, 0.86); 
} 

に可視性を追加します。

.td-menu-mob-open-menu #td-mobile-nav { 
    height: auto; 
    overflow: auto; 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    left: 0; 
    visibility: visible; /* it's added here */ 
} 

とIn：

.td-menu-mob-open-menu .td-menu-background { 
    transform: translate3d(0, 0, 0); 
    -webkit-transform: translate3d(0, 0, 0); 
    -moz-transform: translate3d(0, 0, 0); 
    -ms-transform: translate3d(0, 0, 0); 
    -o-transform: translate3d(0, 0, 0); 
    visibility: visible; /* it's added here */ 
} 

それはあなたの現在の問題を解決します。

しかし、あなたは2番目をもう一度やる必要があるので、ユーザーが2番目のナビゲーションとスクロールを開くと、ナビゲーションメニューのみが表示され、これを閉じることはできません。

.td-menu-background { 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center top; 
    position: absolute; /* before it was position: fixed; */ 
    display: block; 
    width: 100%; 
    height: 113%; 
    z-index: 9999; 
    visibility: hidden; 
    transform: translate3d(-100%, 0, 0); 
    -webkit-transform: translate3d(-100%, 0, 0); 
    -moz-transform: translate3d(-100%, 0, 0); 
    -ms-transform: translate3d(-100%, 0, 0); 
    -o-transform: translate3d(-100%, 0, 0); 
} 

と白い背景の上に十字ボタンを示すために、あなたはそれの色を変更する必要があります。

.td-mobile-close .td-icon-close-mobile { 
    height: 70px; 
    width: 70px; 
    line-height: 70px; 
    font-size: 21px; 
    color: #bdbdbd; /* before it was "color: #fff;" if you don't like "color: #bdbdbd;" you can change it with your desire color */ 
    top: 4px; 
    position: relative; 
}