After creating a toggleable overlay menu and testing it in various browsers, including Internet Explorer, everything seemed to work fine except for one major issue in Firefox (version 46).
The problem arises when toggling the overlay using the "MENU" button; the "CLOSE" button within the overlay fails to appear, leaving the user stuck with the menu open. Here is the expected appearance: https://i.sstatic.net/QY6VE.jpg And here is how it actually looks: https://i.sstatic.net/gAHbz.jpg I have exhausted my ideas trying to fix this issue, so I am reaching out for help.
https://jsfiddle.net/fpgkzd2x/5/ - Click here to access the working code on Fiddle.
HTML Code
<header class="main-nav flex-vhcenter-parent">
<div class="button ">
<p>MENU</p>
</div>
</header>
<nav class="overlay">
<header class="main-nav flex-vhcenter-parent">
<div class="button ">
<p>CLOSE</p>
</div>
</header>
</nav>
SASS Code
$menu-color: #3c948b;
.flex-vhcenter-parent{
display: -ms-flexbox;
display: flex;
justify-content: center;
align-items: center;
}
/* Main Nav menu styles */
.button{
transform: scale(1.3);
transition: all 500ms;
}
.main-nav{
display: flex;
width: 100%;
transition: all 500ms;
z-index: 20;
background-color: $menu-color;
position: fixed;
&.fixed{
.button{
transition: all 500ms;
transform: scale(1);
}
}
}
header > div{
width: 20%;
display: flex;
align-items: center;
justify-content: center;
}
.main-nav p{
margin: 0;
font-size: 1.5em;
}
/* Toggleable Overlay */
.overlay{
z-index: 30;
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.90;
top: -100%;
transition: top 100ms ease-out;
.button{
margin: 0;
color: #fff;
}
}
.opened{
top: 0%;
transition: top 100ms ease-out;
}
JQuery code for toggling
overlay = $(".overlay");
$(".button").click(function(event){
overlay.toggleClass("opened");
});