Question

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

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

这是我的菜单代码

var temp = "";
$('#trigger').change(function(){
  var country = $("#trigger").val();
  var street = $("#autocomplete").val();
  var put = street.replace(" " + temp, "");
  temp = country;
  $('#autocomplete').val(put + " " + country);
});

如果你想查看我的意思，网站是hustlebussellunlimited.com！

Answer 1

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

切换导航牌

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

Answer 2

将navbar-default的{{1}}添加到navbar-inverse div，以显示切换样式。或者写一些CSS来设置.navbar的样式。

默认示例：

＆＃13;

icon-bars

＆＃13;

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

＆＃13;

自定义CSS示例：

＆＃13;

<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>

＆＃13;

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

＆＃13;

Bootstrap菜单折叠工作但不显示图标

2 个答案: