我正在使用 Minimaxing template 来构建我的网站。我更改了它，以便导航栏中的徽标成为我的徽标图片。它在桌面上显示得很好，但在移动设备上不显示。如果它只是文本而不是图像，它会像 Minimaxing 模板网站中显示的那样完美显示。
我的所有代码与原始代码基本相同，但我将以下代码添加到“index.html”
<!-- Header -->
<div id="header-wrapper">
<div class="container">
<div class="row">
<div class="col-12">
<header id="header">
<img class="logo" id="logo" src="C:\Users\test\Desktop\html5up-minimaxing\images\logo.png" width="250">
<nav id="nav">
<a href="index.html" class="current-page-item">Homepage</a>
<a href="twocolumn.html">Test1</a>
<a href="twocolumn2.html">Test2</a>
<a href="onecolumn.html">Test3</a>
<a href="threecolumn.html">Test4</a>
</nav>
</header>
</div>
</div>
</div>
</div>
下面的代码到“main.css”
.logo {
display: flex;
vertical-align: top;
height: 30px;
visibility: visible;
margin-right: 20px;
margin-top: 28px;
}
实际模板有很多我无法在此页面上显示的代码，但我会添加我认为与移动导航栏相关的代码。
/* Nav */
#page-wrapper {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
padding-bottom: 1px;
}
#titleBar {
background-image: -moz-linear-gradient(top, #008dab, #007294);
background-image: -webkit-linear-gradient(top, #008dab, #007294);
background-image: -ms-linear-gradient(top, #008dab, #007294);
background-image: linear-gradient(top, #008dab, #007294);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
display: block;
height: 44px;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 10001;
text-align: center;
color: #fff;
font-size: 1.25em;
background-color: #007294;
}
#titleBar .title {
line-height: 44px;
}
#titleBar .toggle {
position: absolute;
top: 0;
left: 0;
width: 80px;
height: 60px;
}
#titleBar .toggle:after {
content: '';
position: absolute;
left: 4px;
top: 4px;
color: #fff;
text-align: center;
line-height: 31px;
font-size: 0.8em;
width: 50px;
height: 35px;
border-radius: 5px;
box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.25), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 6px 13px 0px rgba(255, 255, 255, 0.2), 0px 2px 2px 0px rgba(255, 255, 255, 0.1);
}
#titleBar .toggle:before {
content: '';
position: absolute;
width: 20px;
height: 30px;
background: url("images/mobileUI-site-nav-opener-bg.svg");
top: 16px;
left: 19px;
}
#titleBar .toggle:active:after {
background: rgba(0, 0, 0, 0.2);
}
#navPanel {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transform: translateX(-275px);
-webkit-transform: translateX(-275px);
-ms-transform: translateX(-275px);
transform: translateX(-275px);
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
display: block;
height: 100%;
left: 0;
overflow-y: auto;
position: fixed;
top: 0;
width: 275px;
z-index: 10002;
background: #00536F;
color: #fff;
box-shadow: inset -10px 0px 40px 0px rgba(0, 0, 0, 0.5);
}
#navPanel .link {
display: block;
color: #fff;
border-top: solid 1px rgba(255, 255, 255, 0.1);
border-bottom: solid 1px rgba(0, 0, 0, 0.2);
height: 55px;
line-height: 55px;
padding: 0 15px 0 15px;
text-decoration: none;
}
#navPanel .link:first-child {
border-top: 0;
}
#navPanel .link:last-child {
border-bottom: 0;
}
body.navPanel-visible #page-wrapper {
-moz-transform: translateX(275px);
-webkit-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}
body.navPanel-visible #titleBar {
-moz-transform: translateX(275px);
-webkit-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}
body.navPanel-visible #navPanel {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
如果您认为需要显示更多代码，您可以通过下载模板找到。
答案 0 :(得分：0)
徽标 img 未显示在移动网站上，因为徽标图像存储在本地 C 驱动器上，而不是服务器上。
<img class="logo" id="logo" src="C:\Users\test\Desktop\html5up-minimaxing\images\logo.png" width="250">
将您的图片上传到您的图片软管服务器，并将本地图片路径替换为 url。
例如：
<img class="logo" id="logo" src="https://stackoverflow.design/assets/img/logos/so/logo-stackoverflow.png" width="250">
*如果你没有任何图片托管服务，这里是关于 how to host your image using google drive.