有没有办法只使用 HTML 和 CSS 使导航栏响应？

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

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

nav 元素只是隐藏在您的标题元素中。对于一个简单的解决方案，您可以在较小的屏幕中垂直呈现标题项。

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

但最常见的解决方案是将导航元素隐藏在汉堡包图标下。请检查这个来自 w3schools