【问题标题】：navbar, problem with the responsive navigation导航栏，响应式导航问题
【发布时间】：2019-04-12 13:05:16
【问题描述】：

当我的导航栏显示在小屏幕上时（移动示例），它没有按预期显示，我无法解决问题

我多次尝试更改我的css，但情况变得更糟

你能帮帮我吗:)

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

【问题讨论】：

您究竟想在设计中解决什么问题？

标签： javascript html css navbar responsive

【解决方案1】：

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

对此的快速解决方法是将overflow: hidden:

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

您可以从这个详尽的 StackOverflow 答案link to answer 中学到很多东西

【讨论】：

【解决方案2】：

我在我的标题上添加了溢出：自动它可以工作，但是当我单击按钮菜单切换时我也无法修复菜单面板，文本向右走，我看不到他。我认为我在类 .menu-toggle 中的“浮动：正确”有问题；文字没有显示在手机显示屏上，他向右走，他没有占据好位置...... 我想将菜单面板放在另一个下方

首页
关于
服务

navbar responsive with overflow : auto

@media( max-width: 1200px){
    header{
        /*margin: 20px;*/
      overflow: auto;
        
    }
}
@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;
        
    }
}

【讨论】：

【解决方案3】：

你只需要为你的容器设置一个更大的宽度。

解决您的问题：

@media( max-width: 768px){
    .menu-toggle{
        width: 400px;
    }
}

【讨论】：

【解决方案4】：

您好，请按照下面的 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>

【讨论】：