Zurb基金會：導航欄消失的小範圍的屏幕尺寸

Question

我最近開始使用基金會，並找出了大部分。 Here is the site I'm having trouble with.

HTML CODE

<nav class="tab-bar show-for-medium-down"> 
     <section class="left-small"> 
     <a class="left-off-canvas-toggle menu-icon" href="#off-canvas-navigation"><span></span></a> 
     <section> 
     </nav> 
     <aside class="left-off-canvas-menu"> 
      <ul class="off-canvas-list"> 
      <li class="navFont"><a href="index.html">MUSICIAN'S GENERAL STORE</a></li> 
       <ul> 
       <li><a href="accessories.html">Accessories</a></li> 
       <li><a href="http://www.nemc.com/musicians-general-store-inc/brass-instruments/">Instrument Rental</a></li> 
       <li><a href="about.html">About Us</a></li> 
       <li><a href="press.html">Press</a></li> 
       <li><a href="http://www.musiciansgeneralstore.tumblr.com">Blog</a></li> 
       <li><a href="events.html">Events</a></li> 

       </ul> 
      <li class="navFont"><a href="metropolis.html">METROPOLIS PRODUCTIONS</a></li> 
       <ul> 
       <li><a href="metband.html">Metropolis Entertainment Band</a></li> 
       <li><a href="production.html">Live Audio + Production</a></li> 
       <li><a href="referrals.html">Stage + Backline Rental</a></li> 
       </ul> 
      <li class="navFont"><a href="rockscool.html">ROCK'SCOOL</a> 
       <ul> 
       <li><a href="about.html">About Us</a></li> 
       <li><a href="locations.html">Locations</a></li> 
       <li><a href="instruments_rates.html">Instruments & Rates</a></li> 
       <li><a href="registration.html">Registration</a></li> 
       <li><a href="teachers.html">Teachers</a></li> 

      </li> 
       </ul> 


      </li> 

      <li class="navFont"><a href="#" data-reveal-id="modalContact" data-animation="fade">CONTACT</a></li> 
      </ul> 
     </aside> 
     <a class="exit-off-canvas"></a> 

    <!-- Desktop Navigation--> 
    <div class="fixed hide-for-medium-down"> 
    <nav class="top-bar" data-topbar> 
     <ul class="title-area padding-logo"> 
     <li class="name"><a href="#"><img class="padding-top-20" src="img/thumblogos/mgs.png" width="75px"></a></li> 
     <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li> 
     </ul> 
     <section class="top-bar-section"> 
     <ul> 
      <li class="navFont active"><a href="index.html">MUSICIAN'S GENERAL STORE</a></li> 
      <li class="navFont"><a href="metropolis.html">METROPOLIS PRODUCTIONS</a></li> 
      <li class="navFont"><a href="rockscool.html">ROCK'SCOOL</a></li> 
      <li class="navFont"><a href="#" data-reveal-id="modalContact" data-animation="fade">CONTACT</a></li> 
      </ul> 
      <ul class="social"> 
      <li><a href="https://www.facebook.com/musiciansgeneralstore"><i class="fa fa-facebook"></i></a></li> 
      <li><a href="http://www.musiciansgeneralstore.tumblr.com"><i class="fa fa-tumblr"></i></a></li> 
      <li><a href="mailto:info@musiciansgeneralstore.com"><i class="fa fa-envelope"></i></a></li> 
     </ul> 
     </section> 

    </nav> 
    </div><!--/fixed class--> 
    <!-- CONTENT START --> 

不幸的是，導航欄不顯示某些屏幕尺寸（1025寬度 - 1345px）。移動/平板電腦和大型桌面屏幕看起來不錯，但在一些更便宜/更小的桌面屏幕上，分辨率會觸發導航欄消失，而不會彈出移動菜單。

我試圖通過幾個不同的論壇找到解決方案，並沒有提出任何內容。關於如何強制桌面菜單顯示直到分辨率足以觸發平板電腦/移動設備的任何想法？

非常感謝！

Answer 1

您的菜單太寬了，不適合這個寬度範圍，所以菜單實際上已經溢出。

我的建議？添加一個媒體查詢的大小範圍，你可以在導航欄中縮小填充位。

@media only screen and (max-width: 1350px){ 
    .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li.active:not(.has-form) a:not(.button){ 
     padding: 0 10px; 
     font-size: 1rem; 
    } 
}