Navbarが消えるバグ

Question

セクションが非表示になっているときに、ナビゲーションメニューの項目を非表示にしようとしています。今、jQueryを使用して、セクションとメディアのクエリを移動して非表示にして、ナビゲーションメニュー項目を非表示にして表示しています。私は、ナビゲーションバーのhtml/cssフレームワークを使用していません。これは私のHTMLの関連NAVセクションです：

<ul class="main-nav"> 
    <li><a href="#about">About</a></li> 
    <li class="music-link"><a href="#music">Music</a></li> 
    <li><a href="#tour">Tour</a></li> 
    <li><a href="#photos">Photos</a></li> 
    <li><a href="#contact">Contact</a></li> 
</ul> 

これは私のメディアクエリです：

@media only screen and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
    div .music-link { 
     display: none; 
    } 
} 

私の現在の問題は、そう、これは明らかではないなら、私に知らせてください、説明するのは少し難しいです。ナビゲーションバーのモバイル版を開いて閉じた後で、サイズが変更されると、私のnavbarは完全に非表示になります。これは私が何をすべきかです...

1. は< 767px オープン
2. モバイルナビゲーションマヌー（ハンバーガーのアイコン）
3. モバイルナビゲーションを閉じる幅には、画面のサイズを変更
4. フルスクリーンでページを更新しますメニュー
5. 5が完了したら、何のナビゲーションメニューがすべてではありません大きな画面へ

のサイズを変更します。それは空白です。何が起こっているかについてのアイデアは？より多くのコードが必要な場合は、私にお知らせください。良い金額があるので、私はそれが私が関連していると思うものに制限しようとしています、そして、私はこのフォーラムに幾分新しいです。どんな助けでも大歓迎です。どうもありがとう！

編集：ここでは、この問題に私の関連するコードの残りの部分は

のnav CSS ...です：ナビゲーションのための

/* Main Nav */ 
.main-nav { 
    float: right; 
    list-style: none; 
    margin-top: 55px; 
} 

.main-nav li { 
    display: inline-block; 
    margin-left: 40px; 
} 

.main-nav li a:link, 
.main-nav li a:visited { 
    padding: 6px 0; 
    color: white; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 90%; 
    border-bottom: 4px solid transparent; 
    -webkit-transition: border-bottom 0.2s; 
    transition: border-bottom 0.2s; 
    z-index: 9999; 
} 

.main-nav li a:hover, 
.main-nav li a:active { 
    border-bottom: 4px solid #248dd1; 
} 

/* Mobile Nav */ 
.mobile-nav-icon { 
    float: right; 
    margin-top: 30px; 
    cursor: pointer; 
    display: none; 
} 

.mobile-nav-icon i { 
    font-size: 200%; 
    color: #fff; 
} 

/* Sticy Nav */ 
.sticky { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(0,0,0,0.8); 
    box-shadow: 0 2px 2px #efefef; 
    z-index: 9999; 
} 

.sticky .main-nav { margin-top: 10px } 

.sticky .main-nav li a:link, 
.sticky .main-nav li a:visited { 
    display: inline-block; 
    padding: 16px 0; 
    color: #248dd1; 
    border-bottom: 4px solid transparent; 
} 

.sticky .main-nav li a:hover, 
.sticky .main-nav li a:active { 
    border-bottom: 4px solid #248dd1; 
} 

.sticky .logo { display: none; } 
.sticky .logo-black { display: block; } 

メディアクエリ：

@media only screen and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
    .mobile-nav-icon { display: inline-block; } 

    .main-nav { 
     float: left; 
     margin: 35px 15px 0 0; 
     display: none; 
    } 

    .main-nav li { display: block; } 

    .main-nav li a:link, 
    .main-nav li a:visited { 
     display: block; 
     border: 0; 
     padding: 10px 0; 
     font-size: 100%; 
    } 

    .sticky .main-nav { margin-top: 10px } 

    .sticky .main-nav li a:link, 
    .sticky .main-nav li a:visited { padding: 10px 0; } 
    .sticky .mobile-nav-icon { margin-top: 10px; } 
    .sticky .mobile-nav-icon i { color: #555; } 
    div .music-link { display: none; } 
} 

そしてこれが私ですナビゲーションバーに関連するjQuery：

$(document).ready(function() { 
    var $window = $(window); 
    var $pane = $('#pane1'); 

    function checkWidth() { 
     var windowsize = $window.width(); 
     if (windowsize < 647) { 
      //if the window is greater than 647px wide then turn on jScrollPane.. 
      $(".section-music").each(function() { 
       $(this).detach().insertAfter("body").css("display", "none"); 
      }); 
      $.scrollify.update(); 
     } 
     if (windowsize >= 647) { 
      //if the window is greater than 647px wide then turn on jScrollPane.. 
      $(".section-music").detach().insertAfter(".section-about").css("display", "block"); 
      $.scrollify.update(); 
     } 
    } 

    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 


    // MOBILE NAVIGATION 
    $(".mobile-nav-icon").click(function() { 
     var nav = $(".main-nav"); 
     var icon = $(".mobile-nav-icon i"); 

     nav.slideToggle(200); 
     if(icon.hasClass("ion-navicon-round")) { 
      icon.addClass("ion-close-round"); 
      icon.removeClass("ion-navicon-round"); 
     } else { 
      icon.addClass("ion-navicon-round"); 
      icon.removeClass("ion-close-round"); 
     } 
    }); 
}); 

もう少しありますが、私のウェブサイトの一部がIE上で動作しないため、ページが特定の種類の電話機やInternet Explorerで表示されているかどうかを検出します。

また価値があります追加するには、小さな画面でモバイルナビゲーションを開き、それを閉じずに大きな画面にサイズを変更しても、何らかの理由で完全なナビゲーションが表示されます。通常のナビが消えるモバイルナビゲーションを閉じるときだけです。

もう一度おねがいします！

Answer 1

画面のサイズを変更するか、メディアクエリを実行すると、表示がnoneに設定されます。しかし、他の画面サイズに戻ったときには、表示をブロックまたは使用しているものに戻すためのクエリーはありません。画面のサイズを通常に変更すると、表示が何かに表示されるようにクエリを作成します。私は間違っているかもしれませんが、あなたが提供した情報から、もっともらしいようです。