菜单栏在断点后失去响应

Question

当浏览器窗口大小小于900px时，菜单栏的大小无法正确调整。
该栏仍然太宽，某些内容不在屏幕上，并且也出现了水平滚动条。

我试图使此菜单栏现在工作两天了。 我什至不能指出问题。 我尝试了所有想到的事情。

我猜错误是在

@media screen and (min-width:900px)

Answer 1

您可以使用flexbox-wrap将每个项目添加到其余项目的下方，如果空间太小，会将项目移动到新行

.site-nav>ul {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  flex-wrap:wrap;
}

您还可以在菜单顶部添加边距以防止仅在小型设备上溢出

@media (max-width :800px){
  .site-nav {
    z-index: 999999999999999999;
    margin-top: 25px;
  }