Search code examples
htmlsasszurb-foundationzurb-foundation-5zurb-foundation-6

Foundation 5 Top Bar w/ Centered Logo Building Block on Foundation 6

Foundation 5 building blocks break on Foundation 6. Does anyone know of a work-around? I have tried re-writing the code but Believe I am missing something. Thanks Adolfo

This is foundation 5 code:

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

This is what i've tried:

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

Solution

  • This building block's components and their classes changed from Foundation 5 to 6. I made this work by using the Responsive Toggle example from the F6 docs and combined it with the F5 Building Block.

    Working Codepen Example

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