Struggling to center the logo between menus using Foundation Zurb. I'm envisioning a layout similar to [menu1] [menu2] --[logo]-- [menu3] [menu4].
I believe utilizing the grid system may help achieve this:
<div class="panel hide-for-small-down">
<div class="row">
<div class="large-4 columns">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
</div>
<div class="large-4 columns">
<img src="http://placehold.it/350x150">
</div>
<div class="large-4 columns">
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
I haven't experimented much with CSS yet, aside from this basic example. Please disregard the top-nav class for now.
ul li{
list-style: none;
display: inline-block;
padding: 15px;
background: #ccc;
}