After implementing a 'hamburger' menu icon on my website's header using only CSS3 code from codrops, I noticed that in the latest Chrome and IE11 it works perfectly. However, when testing in IE9 (which is used at work), only one of the 3 lines of the icon displays properly upon page load. This issue persists even when viewing outside of my workplace. The original demo from codrops also has the same problem with IE9.
Below is the CSS for the icon:
.bt-menu-trigger {
position: fixed;
top: 22px;
left: 20px;
display: block;
width: 50px;
height: 50px;
cursor: pointer;
z-index: 1100;
}
.bt-menu-trigger span {
position: absolute;
top: 50%;
left: 0;
display: block;
width: 100%;
height: 4px;
margin-top: -2px;
background-color: #fff;
font-size: 0px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: background-color 0.3s;
transition: background-color 0.3s;
}
... (remaining CSS omitted for brevity)
Here is the HTML markup used:
<nav id="bt-menu" class="bt-menu">
<a href="#" class="bt-menu-trigger"><span>Menu</span></a>
<ul>
<li><a href="#home.html">Home</a></li>
<li><a href="#documents.html">Documents</a></li>
... (more list items)
</ul>
</nav>
If anyone has ideas on how to resolve the display issue in IE9, I would greatly appreciate your help!