Bootstrap 透明导航栏 - 移动折叠菜单图标消失

Question

最终让导航栏看起来像我想要的那样 - 稍微透明的黑色和白色 links - 折叠的图标不会显示在移动设备上。 link 在那里并且正在运行，但没有图标。我在这里错过了什么？

这是导航栏：

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

这是我的网站：Site

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

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

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

或

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

查看 documentation 中的示例。

Bootstrap 透明导航栏 - 移动折叠菜单图标消失

Bootstrap Transparent Navbar - Mobile Collapsed Menu Icons Disappear

html

css

transparent

navbar

twitter-bootstrap