Question

我想知道必须编辑哪些CSS元素来调整bootstrap的折叠导航栏。以下是我认为感兴趣的CSS代码：

.navbar-default {
  background-color: #ffffff;
  border-color: #0f4c92;
}
.navbar-default .navbar-brand {
  color: #0f4c92;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #0f4c92;
}
.navbar-default .navbar-nav > li > a {
  color: #0f4c92;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #0f4c92;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #0f4c92;
}
.navbar-default .navbar-toggle {
  border-color: #0f4c92;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #0f4c92;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #0f4c92;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #0f4c92;
}
.navbar-default .navbar-link {
  color: #0f4c92;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #0f4c92;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #0f4c92;
  }
}

希望我已经抓住了正确的选择者。以下是显示未选择的折叠导航的屏幕截图（，您可以看到我希望编辑的内容），然后是选定的折叠导航。理想情况下，我希望将未选择的折叠导航设为相同的蓝色，带有3条白色条纹;在活动/选择时，我不在乎它是否具有相同的配色方案。

Unselected collapsed navbar

修改 - 添加HTML

<nav class="navbar navbar-inverse" role="banner">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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"><img src="images/bestgatelogo1.png" alt="logo"></a>
                </div>

                <div class="collapse navbar-collapse navbar-right">
                    <ul class="nav navbar-nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="active"><a href="about-us.html">About Us</a></li>
                        <li><a href="services.html">Services</a></li>
                        <li><a href="careers.html">Careers</a></li> 
                        <li><a href="contact-us.html">Contact</a></li>                        
                    </ul>
                </div>
            </div><!--/.container-->
        </nav><!--/nav-->

Answer 1

如果您想更改右侧图片的background-color，则需要修改课程 - .navbar-toggle
对于border-color，请修改课程 - .navbar-inverse .navbar-toggle
对于3条横条纹，请修改课程 - .navbar-inverse .navbar-toggle .icon-bar

注意 - 您可能需要为选择器添加更多权重或将!important添加到每个CSS属性中。例如 - background-color: red !important

更改折叠的导航栏颜色

1 个答案: