菜单栏在断点后失去响应

Question

当浏览器窗口大小小于 900 像素时，菜单栏没有正确调整大小。
该栏仍然太宽，某些内容不在屏幕上，并且还会出现水平滚动条。

我试图让这个菜单栏工作两天。我什至无法指出问题所在。我尝试了所有想到的东西。

我猜错误是在某处

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

here is a pen with all the code because I thought it's too much code to paste here

Answer 1

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

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

codepen

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

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