I've been working on customizing an existing off-canvas design and I've run into a roadblock. I added submenus, but they're displaying even when the menu is closed. I suspect it's a positioning problem, but despite spending several days trying to figure it out, I'm stuck. The issue only arises when the viewport is small enough for the media queries to kick in. Here is the code:
You can see the problem in action on the live site here. I attempted to create a JSFiddle, but encountered functionality issues. Make sure to view it in Chrome, resize the browser to observe the off-canvas menu problem.
HTML:
<!DOCTYPE html>
<html class="no-js">
...
CSS:
body {
color: #333;
position: relative;
width: 100%;
min-width: 20em;
background: #7C9769;
}
.block {
position: relative;
margin: 0 auto;
padding: 1.5em 1.25em;
max-width: 60em;
}
...
@media screen and (min-width: 45.0625em) {
...
Here's a screenshot demonstrating the issue in Google Chrome: