title: Responsive Design works on Ipad in Inspect Element but not actual Ipad view?
body: <p>I have a dropdown list that works on a web browser and responsive design on google chrome, however on the ipad it doesn't work in landscape mode, here is the code</p>
  
  <p>I have tried (landscape: orientation) {..code here..} and that doesnt' seem to fix the issue?</p>
  
  <p>This is the HTML: </p>
  
  <p>
  </p>
  
  <pre><code>    &lt;div id="logo"&gt;
          &lt;a id="goUpmobile" href="/"&gt;&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;nav id="menu"&gt;
          &lt;ul&gt;
              &lt;li &lt;?php if ($thisPage=="propmanagement") echo " class=\"active\""; ?&gt;&gt;&lt;a href='propmanagement.php'&gt;&lt;span&gt;PROPERTY MANAGEMENT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li &lt;?php if ($thisPage=="residental") echo " class=\"active\""; ?&gt;&gt;&lt;a href='residental.php'&gt;&lt;span&gt;RESIDENTIAL&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li &lt;?php if ($thisPage=="commercial") echo " class=\"active\""; ?&gt;&gt;&lt;a href='commercial.php'&gt;&lt;span&gt;COMMERCIAL&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li &lt;?php if ($thisPage=="neighborhoods") echo " class=\"active\""; ?&gt;&gt;&lt;a href='neighborhoods.php'&gt;&lt;span&gt;NEIGHBORHOODS&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li &lt;?php if ($thisPage=="company") echo " class=\"active\""; ?&gt; class='has-sub'&gt;&lt;a href='company.php'&gt;&lt;span&gt;COMPANY&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li &lt;?php if ($thisPage=="contact") echo " class=\"active\""; ?&gt; class='last'&gt;&lt;a href='contact.php'&gt;&lt;span&gt;CONTACT&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is the CSS code for the main css:</p>
  
  <pre><code>#mobile-nav {
  display: none;  
  }
  
  .menu-nav {
  background:url(../img/menu-mobile.png) 0 0 no-repeat;
  width: 16px;
  height: 16px;
  display: block;
  margin: 22px 0 0 0;
  
  -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
       -o-transform: rotate(0deg);
          transform: rotate(0deg);
  
  -webkit-transition: -webkit-transform 250ms ease-out 0s;    
     -moz-transition: -moz-transform 250ms ease-out 0s;
       -o-transition: -o-transform 250ms ease-out 0s;
          transition: transform 250ms ease-out 0s;
  }
  
  .menu-nav.open {
  background-position: 0 -16px;
  
  -webkit-transform: rotate(-180deg);
     -moz-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
       -o-transform: rotate(-180deg);
          transform: rotate(-180deg);
  
  -webkit-transition: -webkit-transform 250ms ease-out 0s;    
     -moz-transition: -moz-transform 250ms ease-out 0s;
       -o-transition: -o-transform 250ms ease-out 0s;
          transition: transform 250ms ease-out 0s;    
  }
  
  #navigation-mobile {
  display: none;
  text-align: center;
  width: 100%;
  background: rgba(65, 195, 211, 0.9); 
  border-bottom: 1px solid #FFF;
  position: relative;
  float: left;
  z-index: 9999;
  margin-top: 16px;
  }
  
  #navigation-mobile li {
  list-style: none;
  border-top: 1px solid #FFF;
  }
  
  #navigation-mobile li a{
  display: block;
  font-size: 16px;
  text-transform: uppercase;
  padding: 20px 0;
  }
  #navigation-mobile ul{
  margin: 0 0 0px 0px;
  }
  </code></pre>
  
  <p>This is the CSS code for media query below for:</p>
  
  <pre><code>@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1) {
  #menu {
      display: none;  
  }
  
  #menu-nav-mobile {
      margin: 0;
  }
  
  #mobile-nav {
      display: block;
      float: right;
  }
  
  #mobilemenu{
      display: block;
  }
  
  header .sticky-nav #mobile-nav,
  header .sticky-nav.stuck #mobile-nav {
      margin-right: 20px; 
  }
  
  header .sticky-nav {
      position: relative; 
  }
  
  header .sticky-nav.stuck #menu {
      margin-right: 20px; 
  }
  
  #menu-nav-mobile {
      margin: 0;
  }
  
  #navigation-mobile {
      margin-left: 0px;
      margin-right: 0px;
      padding-left: 0px;
      padding-right: 0px; 
      display: block;
  }
  
  #navigation-mobile li a {
      font-size: 14px;
      padding: 12px 0;
  }
  
  
  }
  </code></pre>