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

这是我的网站：Site

Answer 1

您需要在.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">

查看documentation。

中的示例

Answer 2

您也将切换按钮设为透明。只需替换它：

.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! */;
}

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

2 个答案: