Menu icon Foundation
Vertically Center Top Bar

I want to center the "top-bar-right" div vertically within my "large-12 columns" div while keeping the navigation links floated to the right. Any easy way to do that? I have found nothing online that seems to work. I tried the "CSS Tricks" guide to center anything, but it screwed up the navigation links when the screen size shrunk. Here's my code as well:

    <div class="top-bar" id="main-menu">
      <div class="row">
        <div class="large-12 columns">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li><a href="#"><img src="img/sitelogo.png" /></a></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
              <li class="active"><a href="#">ABOUT</a></li>
              <li class="active"><a href="#">PORTFOLIO</a></li>
              <li class="active"><a href="#">EXTRA</a></li>
              <li class="active"><a href="#">CONTACT</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

top-barcenterverticalalignposition

I want to center the "top-bar-right" div vertically within my "large-12 columns" div while keeping the navigation links floated to the right. Any easy way to do that? I have found nothing online that seems to work. I tried the "CSS Tricks" guide to center anything, but it screwed up the navigation links when the screen size shrunk. Here's my code as well:

    <div class="top-bar" id="main-menu">
      <div class="row">
        <div class="large-12 columns">
          <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
              <li><a href="#"><img src="img/sitelogo.png" /></a></li>
            </ul>
          </div>
          <div class="top-bar-right">
            <ul class="menu vertical medium-horizontal" data-responsive-menu="drilldown medium-dropdown">
              <li class="active"><a href="#">ABOUT</a></li>
              <li class="active"><a href="#">PORTFOLIO</a></li>
              <li class="active"><a href="#">EXTRA</a></li>
              <li class="active"><a href="#">CONTACT</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
Alex Scott over 3 years ago

Hey Alec, unfortunately don't have any great advice for you, just wondering if you ever found a solution to this? Know it was awhile ago..

Daniel Lewandowski almost 3 years ago

Needing a solution for this as well. Is there a flexbox option?