Question

我正在该网站上工作，我正在尝试制作一个响应式侧面导航，我已经解决了该问题，使之成为网站的整个高度，但是我正在尝试使其在不同的屏幕尺寸下都能响应，我已经进行了研究，没有运气。

我试图在列中创建导航，但是如果这样做，全高的背景色将消失。

我的代码：

#nav {
  background-color: #79E712;
  top: 0;
  bottom: 0;
  width: 15%;
  position: fixed;
}

.nav {
  margin-top: 50%;
  text-align: center;
  background-color: #79E712;
}

.nav-item {
  padding: 10% 0;
}

a.nav-link {
  color: black;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
}

<section id="nav">
  <ul class="nav flex-column">
    <li class="nav-item">
      <a class="nav-link active" href="#">SOLDADURA</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">BISAGRAS</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">FAJAS</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">INDUSTRIA DEL CAFE</a>
    </li>
  </ul>
</section>

我只是想让它与之对应，因此在台式机，笔记本电脑和平板电脑的屏幕中，屏幕的尺寸为全高，而在移动设备中的顶部为全屏。

响应式垂直导航

0 个答案: