Menu icon Foundation
Vertically-align Menu Links to Logo?

Hi there, I have a logo that is larger than my menu links, but I would like to vertically-align these links in line with the logo. here's an example of what I'm talking about:

Header example

Any ideas? Thanks!

verticalmenuvertically-alignvertical alignlogo

Hi there, I have a logo that is larger than my menu links, but I would like to vertically-align these links in line with the logo. here's an example of what I'm talking about:

Header example

Any ideas? Thanks!

This post has been closed. No new replies can be added.

Rafi Benkual almost 3 years ago

There are several ways - depending on how you coded this. If you give the container for the header a fixed height, you can let the menu to have the same line-height.

 

Padding top and bottom would also work.

Foundation has a vertical center mixin as well.

Display Flex is another way to do it.

Joe Windeknecht almost 3 years ago

Here's what I'm working with:

<div class="top-bar" id="top-bar-menu">
    <div class="top-bar-left float-left">
        <ul class="menu">
            <li><a href="#"><img src="http://placehold.it/350x150"></a></li>
        </ul>
    </div>
    <div class="top-bar-right show-for-medium">
        <ul class="vertical medium-horizontal menu dropdown">
            <li class="menu-item"><a href="#">One</a></li>
            <li class="menu-item"><a href="#">Two</a></li>
            <li class="menu-item"><a href="#">Three</a></li>
        </ul>
    </div>
</div>

Val Ery almost 3 years ago

Hi Joe!

Simple solution is .top-bar-right.menu {padding-top: 60px;} (for example)

I have two questions:
1) Why do you need a responsive menu (class "vertical medium-horizontal")
2) if you use a rule for top-bar-right "show-for-medium"?

It turns out that your menu will never be vertical

Class "float-left" is also not needed :)

Daniel Lewandowski almost 3 years ago

I'm trying to do the same and have tried several things with no luck:

  • Add a .row.align-middle > .columns > {content}
  • Add .align-middle to the .top-bar, .top-bar-left, .top-bar-right items
  • Tried the CSS only fix of using a relative item >  aboslute item > top: 50%; transform: translateY(-50%)
  • When using the CSS only fix, that works but the right side doesn't wrap under the left, it overlaps and covers which is not desired.

Noticed that the top-bar and top-bar li's are set to display:table and display:cell. Is there a reason for this?

When I change the .top-bar:before and .top-bar:after to display: flex that helps the left side but not the right side.

Don't want to set a fixed height for header either.

Any help is greatly appreciated!

 

 

Val Ery almost 3 years ago

Hi All!

See example - http://codepen.io/Val_Ery/pen/pEpxoX

Daniel Lewandowski almost 3 years ago

Wow, thank you! will check it out and try those options. Much appreciated!

Rafi Benkual almost 3 years ago

 Val - awesome answer!

The best way in my opinion - use padding on `.top-bar`

Padding top and bottom will work the best

Daniel Lewandowski almost 3 years ago

Looking at these some more and am wondering if there's a flexbox solution? Adding extra padding on the top forces the links to be too far away from the logo when the right side wraps underneath. Would suck to have to write more and more media queries just for that.

 

Some kind of stack/unstack option without the need for extra padding, perhaps?

 

 

Val Ery almost 3 years ago

I've added another method of centering (based on flexbox)

HTML:

<nav class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li><img src="http://placehold.it/250x100/80ff80" alt="logo" /></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
    </ul>
  </div>
</nav>

CSS:

.top-bar {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}
.top-bar-left {
    margin-right: auto;
}

Daniel Lewandowski almost 3 years ago

Thanks, Val!

I tried copying and pasting your layout directly into my files and the links are still stuck at the top and not in the middle as they should be. Any idea what I'm doing wrong?

I'm also using dropdowns in some links and it's a sticky container. 

See a live example here: http://www.dannylewandowski.com/_cog-DEV/AVM/index.html

Daniel Lewandowski almost 3 years ago

Nevermind! I'm an idiot, linking to the wrong CSS file. Thanks!

Val Ery almost 3 years ago

Hi Daniel!

I can see the result. Happened!

Good luck!

Daniel Lewandowski almost 3 years ago

Thank you! I added quite a lot of other classes to get the logo and title to stay locked up together, but overall it's working superb.