HTML导航菜单背景颜色

问题描述：

我正在编辑Bootstrap模板，我正在尝试更改顶部导航菜单的颜色。HTML导航菜单背景颜色

我这里有此部分代码：

<!-- Navigation --> 
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> 
    <div class="container"> 

    <a class="navbar-brand" href="#"><img src="https://home.channeliser.com/Content/WebContent/images/logo1.png" alt="Channeliser" height="40" width="100"></a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarResponsive"> 
     <ul class="navbar-nav ml-auto"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">About us</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">How it works</a> 
     </li> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Services</a> 
     </li> 
     </ul> 
    </div> 
    </div> 
</nav>

我试图在CSS文件中使用navbarr类名来改变背景，但没有奏效。任何帮助都会受到欢迎。

如果您使用的是现代浏览器，则应该能够右键单击“nav.navbar”，选择Inspect Element或其等价物，然后从开发人员工具确定哪个CSS属性指定背景颜色。我希望它使用'！重要'或者可能是一个更严格的条件。 –

答

.navbar { 
    background-color: red; 
}

没有看到页面的所有CSS，它是不可能知道这是否会工作，但没有任何其他CSS应该做的工作。

我试过了，不起作用 –

然后我需要更多的信息来帮助你。请包含您网页的其余代码。 – McHat

因为我的回答是错误的。我试过这个家伙的方法，它工作正常。 – Jorden1337

答

其对我的工作引导4

与删除解决的BG-光类，并添加你自己的类

例

代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top"> 

</nav>

变化：

<nav class="navbar navbar-expand-lg navbar-light your-bg-navbar fixed-top"> 
    //navbar item 
</nav>

删除BG-光和添加自己的CSS

添加CSS：

.your-bg-navbar { 
    background-color: rgba(35,35,35,0); 
}

RGBA是TRANSPARANT颜色可以改变固体

背景色：红色或#rgbcolor

希望这个工作，你为你。

答

这是因为.bg-light有一个!important这样一个背景颜色将覆盖任何尝试，除非你还使用!important：

.navbar { 
background: red !important; 
}

答

从经验，引导CSS将所有需要优于你自定义的CSS，除了你的加入！在财产结束时的重要标签。所以回答你的问题是

.navbar { 
background-color: red !important; 
}

另外，您可以添加自定义的CSS文件更换BG-光类你自己的自定义类。

HTML导航菜单背景颜色

相关推荐