Hamburgers are not vertically aligned to center of button

[xavianaxw]

My hamburger settings:

$hamburger-padding-x: 3px;
$hamburger-padding-y: 0;
$hamburger-layer-width: 24px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 5px;

With Normalize.css, a style with

font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;

will be applied to the <button> element causing the button to have a height of 24px whereas my hamburger will only have 16px height with the settings above.

As per the screenshot, you can see the hamburger does not align with the button's height vertically.

First thing I tried

Adding vertical-align: middle to .hamburger-box.

But it still doesn't seem vertically centered.

Second (which hopefully is a better solution for hamburgers)

Giving .hamburger a width and height property, and position centering .hamburger-box in relative to .hamburger as such.

.hamburger {
   width: 32px; // can be overwritten by button css
   height: 32px; // can be overwritten by button css
   position: relative;
}

.hamburger-box {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

Giving us this.

I can create a PR for this if you'd like @jonsuh

Cheers

[pixelbrad]

@xavianaxw I ran into this as well. A simpler solution is to explicitly set a line-height value of 1 on the base hamburger class:

.hamburger: {
    line-height: 1;
}

And to set the hamburger-box element to display block:

.hamburger-box {
    display: block;
}

[marinoguerieri]

@xavianaxw I ran into this as well. A simpler solution is to explicitly set a line-height value of 1 on the base hamburger class:

.hamburger: {
    line-height: 1;
}

And to set the hamburger-box element to display block:

.hamburger-box {
    display: block;
}

I just did it, can confirm it's pixel perfect.

[dukhevych]

The reason is display: inline-block on hamburger-box, it's considered as a text node by browser and it tries to align it with baseline (vertical-align value by default).

2 possible solutions:

• add vertical-align: middle; on .hamburger-box class (pull-request maybe?);
• add font-size: 0; on .hamburger, but if you want too use hamburger with label with .hamburger-label, you would need to specify font-size explicitly for .hamurger-label.

[vladimirmartsul]

PR #88