导航栏图标未在某些浏览器中显示

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

Answer 2

由于您已将float:rigt 提供给 icon，因此它已超出 android 中的设备宽度。添加一个margin-right为我解决了这个问题。

@media screen and (max-width: 680px)
ul.topnav li.icon {
    float: right;
    margin-right: 10%;
    display: inline-block !important;
}

我在ul.topnav 中发现的另一个无效属性是边距，而填充值只是计划数字。请使用下面的sn-p

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    width: 100%;
    display: inline-block;
}

Answer 3

试试这个 -

@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {
    display: none;
  }

  ul.topnav li {
    float:right;
  }

  ul.topnav li.icon {
    display: inline-block;
  }
}

https://jsfiddle.net/chris2001/Lc57jw4c/1/

不确定它是否是您想要的。