css 如何在导航栏折叠时更改背景颜色

b91juud3 于 2022-11-27 发布在其他

关注(0)|答案(1)|浏览(173)

如何在导航栏上下移动时更改其背景颜色？我更改了bootstrap.css的一些部分：

.navbar{
  background-color: #A9B7C0;
  border-bottom-color: #EFD9C1;
}

.navbar-inverse {
  background-color: #A9B7C0 !important;
}

.container .navHeaderCollapse .nav li a {
  color: #EFD9C1;
}

.container .navHeaderCollapse .nav .dropdown .dropdown-menu li a {
  color: black;
}

.navbar .navbar-brand{
  color: #EFD9C1;
}
.navbar .navbar-brand:hover{
  color: #EAC67A;
}

.collapse .nav .active a{
  color: #A9B7C0 !important;
  background-color:#EFD9C1;
}

.collapse .nav .active a:hover{
  background-color:#EFD9C1;
  color: #A9B7C0;
}

body {
  background-color: #CCCBC6;
  color:white;
}

@media screen and (max-width: 375px) {
  .fullName{
    display:none;
  }
}

当向下折叠或返回压缩模式的操作仍在进行时，背景色保持黑色，我希望它是我定制的引导程序的颜色。一旦它完成折叠，它就会变成我设置的背景色。
下面是我的html代码：

<div class="navbar navbar-inverse navbar-static-top">
  <div class ="container">
    <div class="navbar-header">
      <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></a>
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse navHeaderCollapse">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="(1)Home.html">Home</a></li>
        <li><a href="(2)AboutMe.html">About Me</a></li>
        <li class="dropdown">
          <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="#"> Mother </a></li>    
            <li><a href="#"> Father </a></li>    
            <li><a href="#"> Younger Brother </a></li>    
            <li><a href="#"> Older Brother </a></li>    
          </ul>
        </li>
        <li><a href="(4)Contact.html">Contact Me</a></li>
      </ul>
    </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/38421885/how-to-change-background-color-as-the-navbar-collapses

1条答案

按热度按时间

63lcw9qa1#

您需要使用与bootstrap相同的选择器，即：.navbar-inverse .navbar-nav>.active>a这就是你的风格如何覆盖引导程序的风格。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
      .navbar{
        background-color: #A9B7C0;
        border-bottom-color: #EFD9C1;
      }

      .navbar-inverse {
        background-color: #A9B7C0 !important;
      }

      .container .navHeaderCollapse .nav li a {
        color: #EFD9C1;
      }

      .container .navHeaderCollapse .nav .dropdown .dropdown-menu li a {
        color: black;
      }

      .navbar .navbar-brand{
        color: #EFD9C1;
      }
      .navbar .navbar-brand:hover{
        color: #EAC67A;
      }

      .collapse .nav .active a{
        color: #A9B7C0 !important;
        background-color:#EFD9C1;
      }

      .collapse .nav .active a:hover{
        background-color:#EFD9C1;
        color: #A9B7C0;
      }

      body {
        background-color: #CCCBC6;
        color:white;
      }

      .navbar-inverse .navbar-nav>.active>a {
        background:#EFD9C1;
        color: #A9B7C0 !important;
      }

      @media screen and (max-width: 375px) {
        .fullName{
          display:none;
        }
      }
    </style>
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-static-top">
      <div class ="container">
        <div class="navbar-header">
          <a href="http://www.facebook.com/rayvenhatesyou" class="navbar-brand"> <span class="glyphicon glyphicon-user"></span> <span class="fullName">Rayven Yor Zambo Esplanada</span></a>
          <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="(1)Home.html">Home</a></li>
            <li><a href="(2)AboutMe.html">About Me</a></li>
            <li class="dropdown">
              <a href="(3)MyFamily.html" class="dropdown-toggle" data-toggle = "dropdown">My Family <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#"> Mother </a></li>    
                <li><a href="#"> Father </a></li>    
                <li><a href="#"> Younger Brother </a></li>    
                <li><a href="#"> Older Brother </a></li>    
              </ul>
            </li>
            <li><a href="(4)Contact.html">Contact Me</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>

http://jsbin.com/weguya/edit?html,css,output

赞(0）回复(0）举报 2022-11-27

我来回答

css 如何在导航栏折叠时更改背景颜色

1条答案

相关问题

热门标签

最新问答