StandardNerd February 2016

foundation 6: how to center horizontal navigation with image

I use zurb foundation 6 and i'm pretty happy with it. But i'm struggling with the header. My goal is to implement a main navigation like this: enter image description here How can i center the menu items inside a horizontal navigation with an image (logo) as a divider?

my attempt is to use an ul list for the nav items:

<nav class="row header show-for-large">
  <div class="large-5 column">
    <ul class="main-nav-left">
      <li>Women</li>
      <li>Men</li>
      <li>Store</li>
      <li>Blog</li>
    </ul>
  </div>
  <div class="large-2 column ">
    <%= image_tag("test-Logo.png", alt: "Nile Logo") %>
  </div>
  <div class="large-5 column">
    <ul class="main-nav-right">
      <li>EN & FR</li>
      <li>Login</li>
      <li>Wunschliste</li>
      <li>Warenkorb</li>
    </ul>
  </div>
</nav>

Answers


Colin Marshall February 2016

I recently migrated the Centered Top Bar With Logo building block for Foundation 6. It should be exactly what you are after.

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?text=LOGO" /></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?text=LOGO">
    </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>

SCS

Post Status

Asked in February 2016
Viewed 2,182 times
Voted 10
Answered 1 times

Search




Leave an answer