引导透明Navbar - Mobile折叠菜单图标消失

Question

最后，让导航条看起来像我想要的-轻巧透明的黑色白色链接-折叠的图标不会出现在手机上。链接是在那里和运作，但没有图标。我在这里错过了什么？

这是肚脐：

    <nav class="navbar transparent navbar-fixed-top" role="navigation">
      <nav class="navbar-inner">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#example-nav-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">EMILY STEWART VIOLIN</a></div>
    <div class="collapse navbar-collapse" id="example-nav-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="index.html">HOME</a></li>
              <li><a href="music.html">MUSIC</a></li>
              <li><a href="pedagogy.html">PEDAGOGY</a></li>
              <li><a href="blog.php">BLOG</a></li>
              <li><a href="contact.html">CONTACT</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </nav>

下面是CSS：

.navbar.transparent .navbar-inner {
       background: rgba(0,0,0,0.4);
       color: #ffffff;
    }
    .navbar.transparent .navbar-inner li a {
        color: #ffffff;
        font-family: "Raleway";
        font-size: 10pt;
        letter-spacing: 3pt;
    }
    .navbar.transparent .nav > li > a:focus,
    .navbar.transparent .nav > li > a:hover {
      color: #666666;
      text-decoration: none;
      background-color: transparent;
    }
    .button.navbar-toggle.collapsed:focus,
    .button.navbar-toggle.collapsed:hover {
      color: #666666;
    }
    .navbar.transparent .navbar-brand:hover, 
     .navbar.transparent .navbar-brand:focus {
      background-color: transparent;
      color: #ffffff;
    }
    .navbar.transparent .navbar-brand{
      background-color: transparent;
      color: #ffffff;
      font-family: "Tenor Sans";
      font-size: 16pt;
      letter-spacing: 1pt;
    }

这是我的网站：站点

Answer 1

你也让切换按钮变得透明。只需替换如下：

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

在这方面：

.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #fc0 /* change this to any color you want! */;
}

Answer 2

您需要将.navbar-default或.navbar-inverse类包含在nav元素中，以生成正确的引导样式。否则，您需要自己设计按钮的样式。

<nav class="navbar navbar-default transparent navbar-fixed-top" role="navigation">

或

<nav class="navbar navbar-inverse transparent navbar-fixed-top" role="navigation">

检查文档中的示例。