How to vertically align logo and menu in Foundation?

Question

I have a simple top-bar using Foundation that is coded up like this..

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><a href="default.html"><img src="http://dev.golightlyplus.com/wig/website/images/wig-logo.png" alt="Home"></a></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Team</a></li>
    </ul>
  </div>
</div>

The codepen for it is here.

What I'm wanting to do is vertically align the right menu with the middle of the logo. I can apply a margin above the top-bar-right class.. but is there a smarter way to do this in Foundation 6?

Would using something like Equalizer make sense here?

Thanks.

Answer 1

Here is a working demo.

First, set the position of top-bar to be relative.

.top-bar {
    position: relative;
}

Then, set the position of .menu in top-bar-right to absolute and use transform:

.top-bar-right .menu {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    right: 0;
}