html - 如何在导航栏(菜单)元素上应用或更改颜色

Question

我想弄清楚如何在导航栏右侧显示图像。一旦它被折叠，我的导航栏右侧也会有一个图像。

此外，我不知道如何在滚动时让我的导航栏固定在页面顶部。我试过 navbar-fixed-top，但无济于事。

我正在使用 Bootstrap

这是我的代码..

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent !important;
}

.navbar-toggle {
  margin-top: 2em;
  border: none;
  color: white;
}

.navbar-fixed-top {
  position: static !important;
}

.navbar-nav,
.navbar-nav li,
.navbar-nav li a {
  text-align: right;
  font-family: "Montserrat";
  color: white;
}

.navbar.navbar-default .navbar-collapse {
  border: none;
  box-shadow: none;
}

.navbar-fixed-top {
  margin-right: 0em;
  margin-top: 1em;
}

.navbar {
  background-color: transparent;
  background: transparent;
  border-color: transparent;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header ">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
      </div>
      <div id="navbarNav" class="navbar-collapse collapse ">
        <br/><br/>
        <ul class="nav navbar-nav navbar-right ">
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="#">CALCULATORS</a></li>
        </ul>
      </div>

    </div>
  </nav>
</div>

非常感谢任何帮助，非常感谢!

Answer 1

这可能是因为 bootstrap 的 CSS 覆盖了您自己的自定义 CSS。不过有一个简单的解决方法，您可以在导航栏导航上实现您自己的 ID 或类，正如我在下面使用 ID “links” 演示的那样，并将 CSS 应用到链接。

.navbar-default .navbar-toggle .icon-bar {
  background-color: white;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: transparent !important;
}

.navbar-toggle {
  margin-top: 2em;
  border: none;
  color: white;
}

.navbar-fixed-top {
  position: static !important;
}


#links a {
  text-align: right;
  font-family: "Montserrat";
  color: red;
}

.navbar.navbar-default .navbar-collapse {
  border: none;
  box-shadow: none;
}

.navbar-fixed-top {
  margin-right: 0em;
  margin-top: 1em;
}

.navbar {
  background-color: transparent;
  background: transparent;
  border-color: transparent;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header ">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNav">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                    </button>
      </div>
      <div id="navbarNav" class="navbar-collapse collapse ">
        <br/><br/>
        <ul class="nav navbar-nav navbar-right" id="links">
          
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">CONTACT</a></li>
          <li><a href="#">CALCULATORS</a></li>
          
        </ul>
      </div>

    </div>
  </nav>
</div>