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

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&nbsp;style="overflow:&nbsp;auto">&nbsp;...&nbsp;</header>

Answer 2

您好，请按照以下HTML结构进行操作：<header>&nbsp; &nbsp; <a href="#" class="logo">Logo</a>&nbsp; &nbsp; <div class="menu-toggle"></div>&nbsp; &nbsp; &nbsp; <nav>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#" class="active">Home</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">About</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Services</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Team</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Portfolio</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li><a href="#">Contact</a></li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; </nav>&nbsp; &nbsp; &nbsp; <div class="clearfix"></div>&nbsp; &nbsp;&nbsp; </header>