CODEWITHSUNDEEP
htmlangularjscssviewport
user3731438
user3731438

Reputation: 283

CSS Menu Not Working on Mobiles or Tablets

I have created the plunkr found here: http://plnkr.co/edit/gqtFoQ4x2ONnn1BfRmI9?p=preview

This menu works as expected on a desktop/laptop.. But it does not look as it does on a desktop.

I imagine the CSS is correct, but something wrong with the viewport settings??

HTML:

<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>

Upvotes: 0

Views: 51

Answers (1)

Christian
Christian

Reputation: 4094

You are not using any vendor prefixes in your css. Even iOS 8 requires them to be present. So in addition to transform also -webkit-transform.

See http://caniuse.com/#search=transform

BTW: Nice menu.

Upvotes: 1

Related Questions