[英]Mobile Menu issues / Icon not displaying
我很難弄清楚為什么移動菜單圖標不會顯示在以下站點上:
您將看到是否縮小到較小的大小,即在右上角有一個鏈接會調出移動菜單。 不應顯示該圖像。
#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
喬希是對的。 如果您更改圖像,它應該可以正常顯示。
#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.