我开始编辑我的网页,并在导航栏中添加了第二个徽标。它在 PC 上看起来不错,但是当我在移动设备上尝试时,导航栏正在覆盖图像。
<nav id="menu" class="navbar fixed-top navbar-toggleable-sm bg-faded px-5 stin">
<button class="navbar-toggler navbar-toggler-right mr-3" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="row d-flex align-items-end">
<div class="col-1 col-md-2 mr-1 mr-sm-0">
<a class="navbar-brand" href="#"> <img src="img/logo_barva.svg" height="90" class="pb-1"></a>´
</div>
</div>
<div class="collapse navbar-collapse prava pr-3" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto ">
<li class="nav-item active">
<a class="nav-link" href="#">DOMŮ<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="uklid.html">ÚKLIDOVÉ SLUŽBY</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pece.html">DOMA PÉČE</a>
</li>
<!--<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">SLUŽBY<span class="caret"></span></a>
<ul class="dropdown-menu col-xs-12" >
<li><a class="dropdown-item" href="uklid.html">Úklidové služby</a></li>
<li><a class="dropdown-item" href="pece.html">Domácí péče</a></li>
</ul>
</li>-->
<li class="nav-item">
<a class="nav-link" href="kariera.html">KARIÉRA</a>
</li>
<li class="nav-item">
<a class="nav-link" href="kontakt.html">KONTAKT</a>
</li>
</ul>
</div>
<div class="logo2">
<div class="col-5 col-md-2 mr-1 mr-sm-0">
<a class="navbar-brand pr-5" href="pece.html"> <img src="img/doma_pece.png" height="65" class="pb-1"></a>´
</div>
</div>
答案 0 :(得分:0)
嗯,我设法做到了。
如果有人需要它:
@media screen and (max-width: 768px) {
body {
padding-top: 15.3rem;
padding-bottom: 0rem;
color: #5a5a5a;
}
}