首页 文章

Zurb Foundation:Nav Bar消失了小范围的屏幕尺寸

提问于
浏览
0

我最近开始使用基金会并且大部分时间都在考虑它 . Here is the site I'm having trouble with.

HTML代码

<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) . 移动/平板电脑和大型桌面屏幕看起来很棒,但在一些更便宜/更小的桌面屏幕上,分辨率会触发导航栏消失,而不会弹出移动菜单 .

我试图通过几个不同的论坛找到解决方案,并且没有提出任何建议 . 有关如何强制桌面菜单显示直到分辨率足够小以触发平板电脑/手机的任何想法?

非常感谢!

1 回答

  • 0

    您的菜单太宽,无法容纳在该宽度范围内,因此菜单实际上是溢出的 .

    enter image description here

    我的建议?添加该大小范围的媒体查询,您可以在导航栏中缩小填充位置 .

    @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;
        }
    }
    

相关问题