How to fix hamburger menu

Question

My hamburger icon is broken on Chrome developer tools -> mobile emulator. The 3 lines aren't aligned with the center, however, on my iPhone everything looks great. Here's the link - http://merehead.com/ Can I fix it somehow through CSS, either make only JS patch to detect user device and make the necessary position to it?

I've attached a screenshot, where you can see 'left:-4px' - to center icon on mobile. I suppose the reason is on iphone, and not Chrome?

Answer 1

i thinks it should be replace class. right way ?

.hamburger-box {
    width: 30px;
    height: 24px;
    display: inline-block;
    position: relative;
}