引导菜单折叠工作但不显示图标答案

【问题标题】：Bootstrap Menu Collapse working but isn't showing icons引导菜单折叠工作但不显示图标
【发布时间】：2016-11-19 07:32:56
【问题描述】：

我正在针对移动设备优化我的网站。我注意到我的可折叠菜单正在工作，但它没有显示图标栏。基本上，如果您单击导航栏图标应位于的区域，则会显示下拉菜单。

如何使图标显示，以便访问者知道有菜单。

这是我的菜单代码

<body data-spy="scroll" data-target="#topnav">

  <div class="navbar navbar-color navbar-fixed-top" id="topnav">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll" href="#page-top">WebInsight</a>
      </div>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active navbutton"><a href="#home">Home</a></li>
          <li class="navbutton"><a href="services">Services</a></li>
          <li class="navbutton"><a href="contact">Contact</a></li>
        </ul>
      </div>
      <!--/.navbar-collapse -->

    </div>
  </div>

</body>

如果您想了解我的意思，该网站是 hustlebussellunlimited.com！

【问题讨论】：

标签： twitter-bootstrap drop-down-menu

【解决方案1】：

将 navbar-inverse 的 navbar-default 添加到您的 .navbar div 以显示切换样式。或者编写一些 CSS 来设置 icon-bars 的样式。

默认示例：

.navbar.navbar-color {
  background: cyan;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target="#topnav">

  <div class="navbar navbar-default navbar-color navbar-fixed-top" id="topnav">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll" href="#page-top">WebInsight</a>
      </div>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active navbutton"><a href="#home">Home</a>
          </li>
          <li class="navbutton"><a href="services">Services</a>
          </li>
          <li class="navbutton"><a href="contact">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

自定义 CSS 示例：

.navbar.navbar-color {
  background: cyan;
}
.navbar.navbar-color .icon-bar {
  background: black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target="#topnav">

  <div class="navbar navbar-color navbar-fixed-top" id="topnav">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand page-scroll" href="#page-top">WebInsight</a>
      </div>

      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active navbutton"><a href="#home">Home</a>
          </li>
          <li class="navbutton"><a href="services">Services</a>
          </li>
          <li class="navbutton"><a href="contact">Contact</a>
          </li>
        </ul>
      </div>

    </div>
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【讨论】：

你的建议真的奏效了！感谢您的帮助。我需要做的就是改变它的颜色，并添加 navbar-default。
不客气，很高兴它成功了，不要忘记将问题标记为已回答（如果已回答），以便其他人可以从中受益。

【解决方案2】：

查看并尝试调整您的代码，请注意此代码中的差异。

切换导航品牌

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

【讨论】：