导航栏响应式

Question

仅需一点帮助即可完成此操作，或者至少需要照亮。 对于我来说，菜单没有折叠到汉堡菜单中。 我在这里找到了指向Codepen的链接：

https://codepen.io/musicstuffed/pen/eYYoZjK

$ python -V
Python 3.6.9

$ pip --version
pip 19.3.1 from /opt/local/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/pip (python 3.6)

Answer 1

您可以查看我对您提供的代码笔所做的更改。 Link

基本上，您在移动设备上隐藏了导航并仅在其处于活动状态时显示：

@media only screen and (max-width: 600px) {
  .navbar {
    justify-content: space-between;
  }
  .navbarToggle {
    display: flex;
    align-self: center;  
  }
  .mainNav {
    display: none;
  }
  .active {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}

我不确定这是否是您想要的css布局，如果不是，可以轻松更改。