导航栏与我的内容重叠。引导程序 4

时间:2021-03-01 20:21:55

标签: html css web

我开始编辑我的网页,并在导航栏中添加了第二个徽标。它在 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>

1 个答案:

答案 0 :(得分:0)

嗯,我设法做到了。

如果有人需要它:

    @media screen and (max-width: 768px) {
body {
  padding-top: 15.3rem;
  padding-bottom: 0rem;
  color: #5a5a5a;
}
}