html - 导航栏图标在某些浏览器中不显示

Question

我正在开发响应式网页。我正在使用自定义导航栏，如下所示；

      function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
          x.className += " responsive";
        } else {
          x.className = "topnav";
        }
      }

/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
  list-style-type: none;
  margin: 10;
  padding: 10;
  overflow: hidden;
}
/* Float the list items side by side */

ul.topnav li {
  float: left;
  margin: 10;
  padding: 10;
}
/* Style the links inside the list items */

ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 40px;
}
/* Change background color of links on hover */

/* ul.topnav li a:hover {background-color: #fff;}
    
    /* Hide the list item that contains the link that should open and close the topnav on small screens */

ul.topnav li.icon {
  display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */

@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */

@media screen and (max-width: 680px) {
  ul.topnav.responsive {
    position: relative;
  }
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

<ul class="topnav" id="myTopnav">
  <li>
    <a href="#news">
      <img class="img-responsive" width="60px" src="imagenes/botones/logo_hera.png" />
    </a>
  </li>
  <li>
    <a href="#news">
      <img class="img-responsive" width="180px" src="imagenes/botones/doctores_boton.png" />
    </a>
  </li>
  <li>
    <a href="#news">
      <img class="img-responsive" width="180px" src="imagenes/botones/hospitales_boton.png" />
    </a>
  </li>
  <li>
    <a href="#news">
      <img class="img-responsive" width="180px" src="imagenes/botones/farmacias_boton.png" />
    </a>
  </li>
  <li>
    <a href="#news">
      <img class="img-responsive" width="180px" src="imagenes/botones/laboratorios_boton.png" />
    </a>
  </li>

  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>

在我的 PC 和 iPhone 上，我可以根据需要看到导航栏图标:

iPhone 截图:

但在我的 Android 设备上它看起来如下:

导航栏图标不可见。

我的代码有什么问题？

编辑:

我知道切换图标在那里，但不可见。一触即动

Answer 1

请在您的样式表中使用此代码添加

@media screen and (max-width: 680px) {
ul.topnav li.icon {
display: block;
}
}