导航栏图标在某些浏览中不显示 [英] Navbar icon not showing in some browsres

问题描述

我正在使用回应式网页。我使用自定义导航栏，如下;

  function myFunction var x = document.getElementById（myTopnav）; if（x.className ===topnav）{x.className + =responsive; } else {x.className =topnav; }从列表中删除边距和填充，删除边距和填充，从列表中删除边距和填充，从列表中删除边距和填充，并添加一个黑色背景颜色* / ul.topnav {list-style-type：none;边际：10; padding：10; overflow：hidden;} / *并列浮动列表项* / ul.topnav li {float：left;边际：10; padding：10;} / *样式列表项内的链接* / ul.topnav li a {display：inline-block;颜色：＃f2f2f2; text-align：center; padding：14px 16px; text-decoration：none;过渡：0.3s; font-size：40px;} / *更改悬停时链接的背景颜色* // * ul.topnav li a：hover {background-color：#fff;} / *隐藏包含应打开的链接的列表项，关闭小屏幕上的topnav * / ul.topnav li.icon {display：none;} / *当屏幕宽度小于680像素时，隐藏除第一个（Home）之外的所有列表项。显示包含链接的列表项，以打开和关闭topnav（li.icon）* / @媒体屏幕和（max-width：680px）{ul.topnav li：not（：first-child）{display：none; } ul.topnav li.icon {float：right; display：inline-block; }} / *当用户点击图标时，responsive类被添加到topnav中。这个类使topnav在小屏幕上看起来不错* / @ media screen和（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 =topnavid = myTopnav> < li> < a href =＃news> < img class =img-responsivewidth =60pxsrc =imagenes / botones / logo_hera.png/> < / a> < / li> < li> < a href =＃news> < img class =img-responsivewidth =180pxsrc =imagenes / botones / doctores_boton.png/> < / a> < / li> < li> < a href =＃news> < img class =img-responsivewidth =180pxsrc =imagenes / botones / hospitales_boton.png/> < / a> < / li> < li> < a href =＃news> < img class =img-responsivewidth =180pxsrc =imagenes / botones / farmacias_boton.png/> < / a> < / li> < li> < a href =＃news> < img class =img-responsivewidth =180pxsrc =imagenes / botones / laboratorios_boton.png/> < / a> < / li> < li class =icon> < a href =javascript：void（0）; onclick =myFunction（）>&＃9776;< / a> < / li>< / ul>  

和我的iPhone，我可以看到导航栏图标，我想：

iPhone屏幕截图：

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

没有导航栏图标可见。

我的代码有什么问题？

编辑：

我知道切换图标存在，但不可见。

$ b

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

不确定如果它是你想要的，但。

I am working on a responsive webpage. I am using a custom navbar, as follows;

      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>

On my PC and my iPhone, I can see the navbar icon as I want:

iPhone Screenshot:

But on my Android device it looks as follows:

There is no navbar icon visible.

What is wrong at my code?

EDIT:

I know the toggle icon is there, but not visible. It works when touched

解决方案

Try this -

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

Not sure if it is what you want though.

这篇关于导航栏图标在某些浏览中不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！