菜单栏在断点后失去响应性

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的外包装，这将移动项目到新行如果空间太大，其余下方添加的每个项目小

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