css - 移动导航栏在 Foundation 中不起作用

Question

我正在构建一个网站，我必须使其“移动优先”。所以我使用 Zurb 的 Foundation，因为我认为它更容易。

所以我有这段代码:

/* General */

/* Header */

@media only screen and (min-width: 40.063em) { 

  .logo-wrapper {
    position: relative;
  }

  .logo-wrapper .logo {
    width: 92px;
    height:  92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -2px;
    margin-top: 60px;
    margin-left: -46px;
  }

  .top-bar{
  	height: 150px;
  }

  // Right part
  .top-bar-section ul.right {
    width: 50%;
    padding-left: 60px;
  }
  
  .top-bar-section ul.right li {
    float:  left;
  }

  // Left part
  .top-bar-section ul.left {
    width:  50%;
    padding-right: 60px;
  }

  .top-bar-section ul.left li {
    float:  right;
  }
  .top-bar li{
  	margin-top: 60px;
  	margin-left: 25px;
  	margin-right: 25px;
  }
}

<!-- Navigation -->
<div class="contain-to-grid sticky">

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <h1><a class="logo show-for-small-only" href="#"><img src="http://placehold.it/50x50" /></a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
  </ul>

  <section class="top-bar-section">
    
    <div class="logo-wrapper hide-for-small-only">
      <div class="logo">
        <img src="http://placehold.it/350x150">
      </div>
    </div>

    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
    <!-- Left Nav Section -->
    <ul class="left">
      <li> <a href="#">Menu 4</a></li>
      <li><a href="#">Menu 5</a></li>
      <li><a href="#">Menu 5</a></li>
     </ul>
  </section>
</nav>

</div><!-- /navigation -->

所以这里的问题是，这段代码在桌面和移动设备上都可以完美运行，但是当它像中等尺寸的屏幕时，假设在平板电脑上它不起作用，它看起来很糟糕。

我不能发布图片给你们看。

但我希望有人能帮我解决这个问题

Answer 1

我想我知道你的问题是什么。 .top-bar li block 中的左右边距过多，导致某些导航项在中型屏幕上超出顶部栏容器。我只是粗略地看了一下这个问题，但它似乎在大约 900px 标记处成为一个问题。一个快速解决方法是在此时添加媒体查询并调整边距:

.top-bar li {
  margin-top: 60px;
  margin-left: 25px;
  margin-right: 25px;

  @media only screen and (max-width: 56.25em) { // 56.25em = 900px 
    margin-left: 6px;
    margin-right: 6px;
  }
}

代码笔:http://codepen.io/thmsmtylr/pen/VvaQOr

希望对您有所帮助。