Check out the plunkr I have created by visiting: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview
The menu on this plunkr functions correctly on a desktop or laptop, but it doesn't display properly on a mobile device.
I suspect that the issue may be with the viewport settings rather than the CSS. Can anyone offer advice?
Here is the HTML code:
<body ng-controller="MainCtrl" ng-style="{true: {overflow: 'hidden'}, false: {}}[toggleMenu]">
<div class="header compact" role="banner">
<div class="menu" ng-class="{true: 'active', false: ' '}[toggleMenu]" ng-style="{true: {width: menuWidth}, false: {}}[toggleMenu]">
<h2 ng-click="toggleMenu = true">Menu</h2>
<div class="nav" ng-style="{ 'width' : winWidth, 'height' : winHeight }">
<ul role="navigation" class="nav-main">
<li class="active">
<a href="../makani/" data-ga-event="Header,Navigate,Home">Home</a>
</li>
<li>
<a href="../makani/challenge/" data-ga-event="Header,Navigate,The Challenge">The
Challenge</a>
</li>
</ul>
<ul role="contentinfo" class="nav-aux">
<li>
<a href="../makani/faq/" data-ga-event="Footer,Navigate,FAQ">FAQ</a>
</li>
<li>
<a href="../makani/about/" data-ga-event="Footer,Navigate,About Us">About Us</a>
</li>
</ul>
</div>
<button type="button" ng-click="toggleMenu = false">Close</button>
</div>
</div>
</body>