基金会5顶吧，在基础6上设有中心标志积木

Question

基金会5个积木打破基金会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

此构建基块的组件及其类从基础5更改为6.我使用F6文档中的Responsive Toggle示例并将其与F5 Building Block结合使用。

Working Codepen Example

HTML

scope.$watch(function() {
    return attr['value'];
}, function(nv) {
    elem.val(nv);
});

CSS

<!-- 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>