美孚導航消失

目前我正試圖弄清楚爲什麼當我將我的瀏覽器放入移動視圖時，我的手機導航只是消失。我似乎無法查明是什麼導致了這個問題，但是當我的導航處於移動視圖時，每當我縮小瀏覽器時，它就會消失。如果任何人都可以幫助我解決這個問題，將不勝感激！謝謝！美孚導航消失

我不得不把我的代碼放在JsFiddle中，因爲它只是有點太長。爲此道歉，但是，這是我的小提琴：https://jsfiddle.net/99sc49a3/1/

這裏是我的html因爲堆棧不會讓我後不代碼：

<header> 
 

 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js" integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g=" crossorigin="anonymous"></script> 
 
    <script src="SlickNav-master/dist/jquery.slicknav.js"></script> 
 

 
    <script> 
 
    $(function() { 
 
     $('#menu').slicknav(); 
 
    }); 
 
    </script> 
 
    <nav> 
 
    <div id="fix"> 
 
     <ul class="main-nav" id="menu"> 
 
     <li> 
 
      <a href="portfolio.html" class="logo"><img id="logo" src="logo.svg" alt="logo"></a> 
 
     </li> 
 
     <li><a href="#logowheader">Home</a></li> 
 
     <li><a href="#recent">Skills</a></li> 
 
     <div class="dropdown"> 
 
      <button class="dropbtn"> 
 
     <li><a href="#description">About</a></li></button> 
 
      <div class="dropdown-content"> 
 
      <a href="#">Work</a> 
 
      <a href="education2.html">Education</a> 
 

 
      </div> 
 

 
     </div> 
 
     <li><a href="#iwant">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header>

來源

2017-04-08 Cakers

在開發者控制檯，你可以看到什麼類，一旦在前看不見被應用於菜單？ – Xander

這是什麼原因造成

@media (max-width: 400px) { 
    #menu { 
    display: none; /* this line, right here */ 
    z-index: 1000; 
    } 
}

在仔細研究你的小提琴時，看起來你使用slicknav.js代表喲你的菜單和問題是你在加載之前調用.slicknav()。請參閱updated fiddle舉例。當slicknav已被加載時，我將.slicknav()呼叫置於window.load事件中。

我是這樣做的：

(function(){ 
    $(window).on('load', function(){ 
     $('#menu').slicknav(); 
    }) 
})(jQuery);

來源

2017-04-08 15:59:58

謝謝你的關注！雖然這使得桌面導航在手機上打開，但它應該改變成我的移動導航，但仍然拒絕這麼做。 @Andrei Gheorghiu – Cakers

我確實有這個代碼用於移動視圖，它可以在桌面和移動設備上的其他頁面上工作。但是，關於此代碼的某些內容會導致我的移動導航無法顯示，並且我在此頁面中添加了新代碼。 @Andrei Gheorghiu – Cakers

查看最新答案。在加載之前你調用了'slicknav（）'。你也需要確保jQuery在你打電話時被加載。 –

美孚導航消失

回答

相關問題