Hamburger icon's first bar slightly off

(heinrich5991) #1

In “Top navigation is not consistent” I saw that the hamburge menu is supposed to be three lines with the same distance to each other:

On my machine however, in both Firefox and Chromium, the first to bars are nearer to each other than the second and the third.


(Jeff Atwood) #2

Yeah, unfortunate font rendering issue – the hamburger is a Font Awesome glyph, specifically this one:

So it will depend on the resolution of the display and the font rendering strategy.

(Zane Beckman) #3

I have this issue as well. It’s annoyed the crap out of me for quite some time, but clearly not enough to make a post about it.

(Sam Saffron) #4

Practically impossible to fix without switching icons or using a gif/png. Works perfectly on my retina mbp, off alignment on my Windows desktop.

(Zane Beckman) #5

With a little experimentation, I found that changing the font-size property from 20 to 21 in .d-header .icons [class^="fa fa-"] fixes this in chrome with no other discernable difference. I haven’t tested this in Firefox.

(heinrich5991) #6

Changing the font size from 20px to 21px fixes it for me as well (using Firefox).

EDIT: Works in Chromium too.

(Bill Ayakatubby) #7

Fixes in Firefox on Windows, too.

(Salman, Freelance Developer) #8

This should help …

(Jeff Atwood) #9

OK, good find, changing top right glyphs to 21px now vs 20px.

edit: although, for the record, it looks worse for me in Chrome at that size. It only starts to look “good” at 25px, at which point it is a wee bit too big. Try it yourself using f12, select the glyph, font-size, then use mousewheel to size it up and down and watch it change in real time …

(Jeff Atwood) #10