导航栏，响应式导航出现问题

Question

当我的导航栏显示在小屏幕上（移动示例）时，它没有按预期显示，我无法解决问题我试图改变我的css几次，但情况变得更糟你能帮我一下吗:)https://codepen.io/Chrisfrade/pen/NmgEbv @media( max-width: 1200px){    header{        /*margin: 20px;*/            }}@media( max-width: 768px){    .menu-toggle{        display: block;        width: 40px;        height: 40px;        margin: 10px;              float: right;        cursor: pointer;        text-align: center;        font-size: 30px;        color: #069370;    }    .menu-toggle:before{        content: '\f0c9';        font-family:  FontAwesome;        line-height: 40px;    }    .menu-toggle.active:before{        content: '\f00d';        font-family:  FontAwesome;        line-height: 40px;    }    nav {        display: none;    }    nav.active {        display: block;        width: 100%;    }    nav.active ul {        display: block;            }    nav.active ul li a {        margin: 0;            }}

Answer 1

元素中的<header>元素是浮动的，因此菜单不知道该元素停在哪里，这导致CSS不知道如何计算该元素的高度

一个快速的解决方法是overflow: hidden：

<header style="overflow: auto"> ... </header>

Answer 2

您好，请按照以下HTML结构进行操作：

<header>

    <a href="#" class="logo">Logo</a>

    <div class="menu-toggle"></div>

      <nav>

        <ul>

          <li><a href="#" class="active">Home</a></li>

          <li><a href="#">About</a></li>

          <li><a href="#">Services</a></li>

          <li><a href="#">Team</a></li>

          <li><a href="#">Portfolio</a></li>

          <li><a href="#">Contact</a></li>

        </ul>

      </nav>

      <div class="clearfix"></div>   

  </header>