jquery - 断点后菜单栏失去响应

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;
  }