CSS3/HTML5: Hamburger menu displayed with fixed positioning not displaying - html

Question

I created a hamburger dropdown menu which was working until recently, which I'm guessing is due to a browser update in Chrome. So I'm looking into improving the stability of it across browsers. Now it does not display at all. In Chrome is looks like it is positioned correctly via the dev tools. (My website if anyone wants to inspect: http://alexandstein.com/main/dndchar ) I tried checking the Z-index, but it seems I've already set that to 30.
Here is the HTML for the navigation, which includes the hamburger menu.
<nav id="navigation">
<ul>
<span id="logo">
<li>Alexworks</li>
</span>
<span id="links">
<li>About-Meta</li><li>Projects</li><li>Music</li> </span>
<span id="hamburgerSection">
<li id="hamburger" class="menuFocused"><img src="http://alexandstein.com/resources/images/icons/hamburger.png" alt="Menu" class="iconSmall">
</li>
</span></ul>
<div id="hamburgerMenu" style="display: block;">
<div id="controls">
<img height="35" width="35" class="textControls" id="smallTextButton" src="/resources/images/icons/TextIconSmall.png" alt="Small">
<img height="35" width="35" class="textControls" id="medTextButton" src="/resources/images/icons/TextIconMed.png" alt="Medium">
<img height="35" width="35" class="textControls" id="largeTextButton" src="/resources/images/icons/TextIcon.png" alt="Large">
</div>
<p>Table of Contents</p><p>
</p><ul id="tableOfContents"><li>Preface</li>
<li>Instructions</li>
<li>DnD Character Manager</li>
<li>Notes</li>
</ul>
</div>
</nav>
The pertinent CSS:
#hamburgerMenu{
background-color: rgba(30,30,30, 0.9);
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding: 9px;
width: 230px;
position: fixed;
top: 35px;
right:0%;
z-index: 30;
font-size: 12pt;
border-left-style: solid;
border-left-color: rgba(100,100,100, 0.5);
border-left-width: 4px;
overflow-x: hidden;
.textControls{
width: 35px;
height:35px;
margin-right: 5px;
display: inline;
background-color: white;
color: black;
text-decoration: underline;
text-align: center;
opacity: 0.5;
}
.textControls:hover{
opacity: 1.0;
}
}
Here is the navigation CSS if anyone wants to check the parent element for any quirks:
/*NAVIGATION BAR*/
#navigation{
min-width: #MIN-WIDTH;
list-style-type: none;
text-align: center;
width: 100%;
margin: 0%;
padding: 0%;
padding-top: .3em;
position: fixed;
top: 0px;
right:0px;
z-index: 10;
background-color: black;
height: 35px;
overflow-y: hidden;
overflow-x: scroll;
ul{
margin: 0%;
padding: 0%;
padding-top: 0%;
}
a{
margin-top: 5px;
margin-right: .4em;
color: #HEADER_TEXT;
}
a:visited{
color: #999;
}
a:hover{
color: #bbb;
}
li{
display: inline-block;
width: 13em;
height: 1.8em;
border-bottom-style: solid;
border-bottom-color: red;
}
li:hover{
background-color: #333;
}
.iconSmall{
width: 30px;
height:30px;
}
#logo{
display: inline-block;
text-align: left;
width: inherit;
float:left;
letter-spacing: 5px;
}
#links{
display: inline-block;
right: 0px;
}
#hamburger{
width: 30px;
border-bottom-style: none;
float: right;
}
}

Answer 1

The problem is the overflows on your #navigation element. With these overflows, you are telling the browser to not show anything outside the scope of the #navigation element.
The most likely reason why it was working before and isn't now is overflow-x and overflow-y are still experimental (and also not backward compatible). I'd recommend taking them out.
Picture with the chrome inspector changes: