Bootstrap Menu Collapse working but isn't show

I am optimizing my website for mobile devices. I noticed that my collapsible menu is working, BUT it doesn't show the icon bars. Basically, if you click in the area where the navbar icons SHOULD be, the dropdown menu will show.

How can I make the icons show so visitors can know there is a menu.

Here is my code for my menu

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

The website is hustlebussellunlimited.com if you want to check out what I mean!

标签： twitter-bootstrap drop-down-menu

2条回答

劫难

2楼-- · 2020-05-07 18:45

Add navbar-default for navbar-inverse to your .navbar div to show the toggle styles. Or write some CSS to style the icon-bars.

Default Example:

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

Custom CSS Example:

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

0人赞添加讨论(0) 举报

Root（大扎）

3楼-- · 2020-05-07 18:51

take look and try to make adjustment to your code please note the differences in this code.

Toggle navigation Brand

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

0人赞添加讨论(0) 举报

Bootstrap Menu Collapse working but isn't show

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间