如何更改导航栏的默认背景颜色？ [复制]

Posted 2023-03-06

【中文标题】如何更改导航栏的默认背景颜色？ [复制]

【英文标题】：How can I change the default background color of the nav bar? [duplicate]

【发布时间】：2017-06-16 08:04:03

【问题描述】：

如何更改导航栏的默认背景颜色？在我的 html 中，我有这段代码，但页面没有呈现它，它坚持默认的引导 css。这是我的实时测试页面http://andrewsamonas.com/，它显示了默认的反向深色导航栏，而不是我的导航栏自定义导航栏。我用谷歌搜索了很多，这就是我发现使用 navbar-custom 的方式

这是我添加到我的 style.css 中的：

.navbar-custom 
    background-color: #CC0000;
    border-color: #AA0000;
    border-radius: 0;


.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus 
    color: #FFF;


.navbar-custom .navbar-nav > li > a 
    color: #FFF;


.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus 
    background-color: #AA0000;


.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus 
    color: #FFF;
    background-color: #AA0000;


.navbar-custom .navbar-text 
    color: #FFF;


.navbar-custom .navbar-toggle 
    border-color: #AA0000;


.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus 
    background-color: #AA0000;


.navbar-custom .navbar-toggle .icon-bar 
    background-color: #FFF;


 this is in the html head 

<link rel="stylesheet" href="css/styles.css">


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


this is the navbar part 
<div class="navbar navbar-inverse navbar-fixed-top"> 
  
<div class="container">
  
<div class="navbar-header">
<a href="#" class="navbar-brand">My Site</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><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contacts</a></li>


        <li class="dropdown">

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a>

        <ul class="dropdown-menu">
        <li><a href="#">Logout</a></li>
        <li><a href="#">Logout</a></li>
        <li><a href="#">Logout</a></li>                 

        </ul>


        </li>
      </ul>
    </div>

</div></div>


        <div id="push"></div>

【问题讨论】：

不，它不是重复的。

您需要将样式表放在 Bootstrap 之后才能使您的样式生效：bootstrap.css，然后是 styles.css。

【参考方案1】：

您实际上并未在 HTML 中的任何位置应用 navbar-custom 类。将其添加到 div 上类列表的末尾，类为 navbar。

<div class="navbar navbar-inverse navbar-fixed-top navbar-custom">

【讨论】：

这不起作用，我只是添加它并在此处重新上传了我的页面andrewsamonas.com

【参考方案2】：

改变

<div class="navbar navbar-inverse navbar-fixed-top">

到

<div class="navbar-custom navbar-fixed-top"> 

【讨论】：

这可以将其更改为我的自定义颜色，但现在我在 LOGIN 下的下拉菜单不起作用。

【参考方案3】：

无需更改课程。 只需要为您的选择器提供比当前“主导”选择器更高的特异性：

.navbar.navbar-inverse 
background-color: #CC0000;

这将覆盖标准背景。

编辑：如果出于任何原因您更喜欢使用 navbar-custom，则必须将此类添加到元素中，并且仍然使您的选择器具有更高的特异性。例如：

.navbar.navbar-custom  

【讨论】：

我要更改导航栏颜色，但现在我的下拉菜单不起作用。

它在您发布的原始代码 sn-p 中也不起作用。这不可能是由于新更改的背景颜色。为了帮助您，我需要查看隐藏/显示下拉列表的代码。这似乎是由 javascript 函数处理的。

我已经废弃了这个导航栏并从头开始，一次慢慢地改变一两行代码并保存原始代码。谢谢