基础5顶部钢筋，基础6上有中心标志构建块

Question

Foundation 5构建块在Foundation 6上断裂。有人知道附近有工作吗？我试过重新编写代码，但相信我遗漏了什么。感谢Adolfo

这是基础5代码：

@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-left: -46px; }
  .top-bar-section ul.right {
    width: 50%;
    padding-left: 60px; }
  .top-bar-section ul.right li {
    float: left; }
  .top-bar-section ul.left {
    width: 50%;
    padding-right: 60px; }
  .top-bar-section ul.left li {
    float: right; } }
SCSS
@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-left: -46px;
  }
  // 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;
  }
}
JS

<!-- 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>Menu</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 class="has-dropdown">
              <a href="#">Menu 4</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
            <li class="has-dropdown">
              <a href="#">Menu 5</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
          </ul>
        </section>
      </nav>
    </div><!-- /navigation -->

这就是我尝试过的：

@media only screen and (max-width: 40em) {
.menu-text {
    display: none !important; } }  
        @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-left: -46px;
            }
            // 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;
            }
        }

<!-- Navigation -->
      <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>Menu</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 class="has-dropdown">
              <a href="#">Menu 4</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
            <li class="has-dropdown">
              <a href="#">Menu 5</a>
              <ul class="dropdown">
                <li><a href="#">First link in dropdown</a></li>
              </ul>
            </li>
          </ul>
        </section>
      </nav>
    </div><!-- /navigation -->

Answer 1

此构建块的组件及其类从Foundation 5更改为Foundation 6。我使用F6文档中的响应切换示例完成了这项工作，并将其与F5构建块相结合。

工作代码笔示例

HTML

<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
  <a class="logo-small show-for-small-only" href="#"><img src="http://placehold.it/50x50" /></a>
  <button class="menu-icon" type="button" data-toggle></button>
  <div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">
  <div class="logo-wrapper hide-for-small-only">
    <div class="logo">
      <img src="http://placehold.it/350x150">
    </div>
  </div>
  <!-- Left Nav Section -->
  <div class="top-bar-left">
    <ul class="vertical medium-horizontal menu">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>
  <!-- Right Nav Section -->
  <div class="top-bar-right">
    <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
      <li class="has-submenu">
        <a href="#">Menu 4</a>
        <ul class="submenu menu vertical medium-horizontal" data-submenu>
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
      <li class="has-submenu">
        <a href="#">Menu 5</a>
        <ul class="submenu menu vertical" data-submenu>
          <li><a href="#">First link in dropdown</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

CSS

/* Small Navigation */
.logo-small {
  float: right;
}
.title-bar {
  padding: 0 .5rem;
}
.menu-icon,
.title-bar-title {
  position: relative;
  top: 10px;
}
/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) { 
  .logo-wrapper {
    position: relative;
  }
  .logo-wrapper .logo {
    width: 92px;
    height:  92px;
    position: absolute;
    left: 50%;
    right: 50%;
    top: -6px;
    margin-left: -46px;
  }
  // Right part
  .top-bar-right {
    width: 50%;
    padding-left: 60px;
  }
  .top-bar-right ul {
    float:  left;
  }
  // Left part
  .top-bar-left {
    width:  50%;
    padding-right: 60px;
  }
  .top-bar-left ul {
    float:  right;
  } 
}