foundation 6: how to center horizontal navigation with image - html

Question

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

Answer 1

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>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</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">
Menu 4
<ul class="submenu menu vertical medium-horizontal" data-submenu>
<li>First link in dropdown</li>
</ul>
</li>
<li class="has-submenu">
Menu 5
<ul class="submenu menu vertical" data-submenu>
<li>First link in dropdown</li>
</ul>
</li>
</ul>
</div>
</nav>
SCSS
/* Variables */
// Adjust width accordingly (use even #'s)
$logo-width: 118px;
// Reduce px value to increase space between logo and menu text
$logo-padding: $logo-width - 32px;
// Leave alone
$logo-margin: - ($logo-width / 2);
/* 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 {
width: $logo-width;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: $logo-margin;
}
}
// Right part
.top-bar-right {
width: 50%;
padding-left: $logo-padding;
ul {
float: left;
}
}
// Left part
.top-bar-left {
width: 50%;
padding-right: $logo-padding;
ul {
float: right;
}
}
}