菜单栏在断点后松动了它的响应能力

Question

当浏览器窗口大小小于900px时，菜单栏没有正确调整大小。
条形图仍然太宽，某些内容在屏幕外，并且也出现水平滚动条。

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

我猜错误在

之内

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