[英]Mobile Menu issues / Icon not displaying
I am having a hard time figuring out why the mobile menu icon will not display on the following site: 我很难弄清楚为什么移动菜单图标不会显示在以下站点上:
You will see if you resize down to a smaller size that in the top right corner there is a link which does bring up the mobile menu. 您将看到是否缩小到较小的大小,即在右上角有一个链接会调出移动菜单。 The image that is supposed to show there does not though.
不应显示该图像。
#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;
}
}
Your image is a transparent .png with only white bars, so it's there but you can't see it against a white background. 您的图片是一个只有白色条形的透明.png图像,因此它存在,但是您无法在白色背景下看到它。 You can verify this by adding a background color to your background CSS declaration, for example:
您可以通过在背景CSS声明中添加背景色来验证这一点,例如:
background: red url('http://www.cap-acp.org/_images/icon-res-menu.png') center center no-repeat
Josh is right. 乔希是对的。 If you change the image, it should show up fine.
如果您更改图像,它应该可以正常显示。
#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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.