css не отображается на iphone

Question

У меня есть следующее мобильное меню. В инструментах разработки chrome он отображается правильно как iphone, но не в фактическом iphone.

Это странно, потому что единственное, что кажется другим, - это гамбургер. в частности, я хочу изменить цвет гамбургера и иметь возможность перемещать его влево или вправо. На моем iphone я проверил это в chrome, сафари и firefox. Все они дают одинаковый результат.

Почему цвет фона .nav-mobile синий на рабочем столе, а на iphone он светло-синий?

$( document ).ready(function() {
(function($) {
  $(function() {
    $('nav ul li > a:not(:only-child)').click(function(e) {
      $(this).siblings('.nav-dropdown').toggle();
      $('.nav-dropdown').not($(this).siblings()).hide();
      e.stopPropagation();
    });
    $('html').click(function() {
      $('.nav-dropdown').hide();
    });
  });
  document.querySelector('#nav-toggle').addEventListener('click', function() {
    this.classList.toggle('active');
  });
  $('#nav-toggle').click(function() {
    $('nav ul').toggle();
  });
})(jQuery);
});

@charset "UTF-8";

body{
    margin:0px 0;
}

#header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:20px;
    margin:5px 0;
    
}

#header img{
    width:161px;
}

#text{
    
    text-align:center;
    width:calc(100% - 165px);
    color:#538231;
    font-size:25px;
}


nav {
  float: right;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul li {
  float: left;
  position: relative;
  width:160px;
  text-align:center;
  background: #b3d7f7;
}
nav ul li a {
  display: block;
  padding: 0 0px;
  line-height: 35px;
  background: #b3d7f7;
  color: #538231; 
  text-decoration: none;
}
nav ul li a:hover {
  background:  #538231; /*#2581DC; */
  color: #b3d7f7; /*#ffffff;*/
  background-color:#538231;
}

nav ul li:hover{
     background-color:#538231;
}
nav ul li a:not(:only-child):after {
  padding-left: 4px;
  content: " ▾";
}
nav ul li ul li {
  width: 155px;
  text-align:left;
  padding-left:5px;
 
}
nav ul li ul li a {
  padding: 15px 0px;
  line-height: 20px;
  z-index: 1;
  
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}





.nav-mobile {
  display: none;
  position: absolute;
  top: 70px;
  right: 8px;
  background: blue;
  height: 35px;  
  width: 35px;
}

#nav-toggle {
  position: absolute;
 /* right:100px; */
  top: 5px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
 /* background-color:red; */
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: #ffffff;
  position: absolute;
  display: block;
  content: ""; 
  transition: all 300ms ease-in-out;
 /* background-color:red;*/
}
#nav-toggle span:before {
  top: -10px;
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform: rotate(45deg);
}
#nav-toggle.active span:after {
  transform: rotate(-45deg);
}



.fa {
 
  width: 25px;
  text-align: center;
  text-decoration: none;
  margin: 0;
  vertical-align:middle;
}

.fa:hover {
    opacity: 0.37;
}


.brand{
    display:flex;
    padding-left:0;
    align-items:center;
    justify-content:space-around;
    width:200px;
    
    
}

@media only screen and (max-width: 1000px) {
  .fa {
    width:2.5vw;
  }
  html{
      font-size:2.5vw;
  }
  
  nav ul li ul li{
      width:calc(16vw - 0px);
  }
    nav ul li{
        width:16vw;
    }
  .brand{
      width:20vw;
}}



@media only screen and (max-width: 800px) {
  .nav-mobile {
    display: block;
  }
  .brand{
      width:200px;
  }
  .fa{
      width:25px;
  }
  
  section{
      font-size:20px;
  }

  nav {
    width: 100%;
   /* padding: 55px 0 15px; */
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
    width:180px;
    text-align:left;
  }
  
  nav ul li:hover{
      background-color:#b3d7f7;;
  }
  
  nav ul li a {
    padding: 15px;
    line-height: 5px;
  }
  
  nav ul li ul li{
      width:175px;
  }
  
   nav ul li ul li:hover {
       background-color:#538231;
   }
  nav ul li ul li a {
    padding-left: 15px;
    color:white;
    
  }

  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: 801px) {
  .nav-list {
    display: block !important;
  }
}
.navigation {
  height: 35px;
  background: #b3d7f7;
}

.nav-container {
 /* max-width: 1000px; */
  margin: 0 auto;
}

.brand {
  position: absolute;
 /* padding-left: 20px; */
  float: left;
  line-height: 31.5px;
  text-transform: uppercase;
/*  font-size: 1.4em;  */
}
.brand a,
.brand a:visited {
  color: #538231;
  text-decoration: none;
}

<!DOCTYPE html>
<html>

<head>
	<title>SWAG</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="../public/js/mobileNav2.js"></script>
	<link rel="stylesheet" href="../public/css/mobileNav2.css"> 

</head>

<body>
    
<div id='header'>
    <img src="https://www.sustainablewestonma.org/swag/public/images/swag-logo.jpg" width=25%>
    <div id='text'>Educate Inititiate Collaborate</div>
</div>
<section class="navigation">
  <div class="nav-container">
    <div class="brand">
     <a href="mailto:swag@sustainablewestonma.org">
         <img class="fa" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/mail3-blue.png">
    </a>
      <a target="_blank" rel="noopener noreferrer" href="https://www.facebook.com/groups/1960906387454685/">
          <img class="fa facebook" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/facebook-square-brands-blue.png">
      </a>
      <a target="_blank" rel="noopener noreferrer" href="https://twitter.com/Weston_SWAG">
          <img class="fa twitter" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/twitter-square-brands-blue.png">
      </a>
      <a target="_blank" rel="noopener noreferrer" href="https://instagram.com/sustainablewestonactiongroup/">
          <img class="fa instagram" src="https://www.sustainablewestonma.org/wp-content/uploads/2019/09/instagram-brands-blue.png">
      </a>
    </div>
    <nav>
      <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span>xxx</span></a>
      </div>
      <ul class="nav-list">
        <li>
          <a href="#!">Home</a>
        </li>
        <li>
          <a href="#!">About Us</a>
          <ul class="nav-dropdown">
            <li>
              <a href="#!">Our Story</a>
            </li>
            <li>
              <a href="#!">Our Work</a>
            </li>
            <li>
              <a href="#!">SWAG Leaders</a>
            </li>
            <li>
              <a href="#!">In the News</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">Calendar</a>
        </li>
        <li>
          <a href="#!">Take Action</a>
          <ul class="nav-dropdown">
            <li>
              <a href="#!">Get Involved</a>
            </li>
            <li>
              <a href="#!">Donate</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#!">Resources</a>
        </li>
      </ul>
    </nav>
  </div>
</section>
<div>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
</body>
</html>

Answer 1

Попробуйте удалить кэш на вашем iPhone, возможно, он хранит более старую версию CSS файла