有没有办法通过仅使用 HTML 和 CSS 来使导航栏响应？

Question

我对 html 和 css 很陌生。 我正在努力使导航栏对我的主要内容做出响应，但在我看来，当屏幕尺寸以某种方式发生变化时，只有容器才会响应。 我也尝试过width: 100% & @media但我不知道我哪里出错了，导航元素就消失了。

这是我正在处理的页面： https://codepen.io/kippulainen04/pen/YzZYqLz提前致谢！

Answer 1

导航元素只是隐藏在您的 header 元素中。 对于一个简单的解决方案，您可以在较小的屏幕中垂直渲染 header 的项目。

@media only screen and (max-width: 900px) {
  #header, #header ul{
    flex-direction: column;
  }
  #header ul li{
    margin-bottom: 10px;
  }
}

但最常见的解决方案是将导航元素隐藏在汉堡图标下。 请查看 w3schools 的本教程