Trying to design a straightforward 3-line mobile menu dropdown, but encountering inconsistency in appearance across different devices. The vertical positioning of the icon is varying based on the operating system and browser version:
- Linux -desktop
- Firefox - slightly off center vertically.
- Chrome - appears centered.
- Windows 8 -desktop
- Firefox - seems centered.
- IE 9-11 - also appears centered.
- Android
- Firefox - very low positioning.
- Chrome - slightly lower than center.
Below is the sample HTML code:
<div id="nav">
<div class="mobile-bars">
<a href="#">≡</a>
</div>
</div>
Also, here's the sample CSS:
#nav {
padding:0;
margin:0;
}
.mobile-bars {
background:#3e4041;
height:50px;
font-size:50px;
line-height:1;
margin:0;
padding:0;
}
.mobile-bars a {
color:white;
position:absolute;
display:block;
padding:0 0.2em 0 0.2em;
margin:0;
text-decoration:none;
}
For the detailed code and demonstration, check out this jsfiddle link. Any ideas why the vertical centering of the three-line icon isn't consistent?