Html 移动菜单问题/图标未显示

我很难弄明白为什么手机菜单图标不会显示在以下网站上：

你会看到如果你调整到一个较小的大小，在右上角有一个链接，它会打开移动菜单。但是，应该在那里显示的图像却没有

#nav-toggle {
position: absolute;
top: 0;
right: 0;
display: block;
width: 54px;
height: 44px;
overflow: hidden;
text-indent: -9999px;
-webkit-user-select: none;
background: url('http://www.cap-acp.org/_images/icon-res-menu.png') center center no-repeat;  }  

   @media screen and (min-width: 767px) {
 .js #nav {
   position: relative;
 }
 .js #nav.closed {
   max-height: none;
 }
 #nav-toggle {
   display: none;
 }
}

---

你的图像是一个透明的.png，只有白色的条带，所以它在那里，但在白色背景下你看不到它。您可以通过向背景CSS声明添加背景颜色来验证这一点，例如：

background: red url('http://www.cap-acp.org/_images/icon-res-menu.png') center center no-repeat

---

你的图像是一个透明的.png，只有白色的条带，所以它在那里，但在白色背景下你看不到它。您可以通过向背景CSS声明添加背景颜色来验证这一点，例如：

background: red url('http://www.cap-acp.org/_images/icon-res-menu.png') center center no-repeat

---

乔希是对的。如果你改变了图像，它会显示得很好

#nav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 54px;
  height: 44px;
  overflow: hidden;
  text-indent: -9999px;
  -webkit-user-select: none;

  /* I changed the background src to a different hamburger and it works fine */
  background: url('https://www.elavon.com/images/icon-mobile-menu-off.svg') center center no-repeat; 
}  

@media screen and (min-width: 767px) {
  .js #nav {
    position: relative;
  }
  .js #nav.closed {
    max-height: none;
  }
  #nav-toggle {
    display: none;
  }
}

---

乔希是对的。如果你改变了图像，它会显示得很好

#nav-toggle {
  position: absolute;
  top: 0;
  right: 0;
  display: block;
  width: 54px;
  height: 44px;
  overflow: hidden;
  text-indent: -9999px;
  -webkit-user-select: none;

  /* I changed the background src to a different hamburger and it works fine */
  background: url('https://www.elavon.com/images/icon-mobile-menu-off.svg') center center no-repeat; 
}  

@media screen and (min-width: 767px) {
  .js #nav {
    position: relative;
  }
  .js #nav.closed {
    max-height: none;
  }
  #nav-toggle {
    display: none;
  }
}