I am unable to change one element of my Navbar to white (to match the others). I've tried the other questions on StackOverflow with CSS/HTML but it simply does not change!
Here is my HTML code:
Thanks,
Have tried CSS override on the color, but does not have any action.
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #d35400;">
<a class="navbar-brand" href="">P s y c h l y t X | Scala: Client View</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Return to Scala application</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/scale">Edit my client's outcomes</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-text" >Welcome, <%= @user['info']['name'] %></a>
</li>
</ul>
</div>
</nav>
nav {color: #FFFFFF;} a:-webkit-any-link {color: #FFFFFF;}
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #d35400;"> <a class="navbar-brand" href="">P sychlyt X | Scala: Client View</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="">Return to Scala application</a> </li> <li class="nav-item"> <a class="nav-link" href="/scale">Edit my client's outcomes</a> </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-text" >Welcome, <%= @user['info']['name'] %></a> </li> </ul> </div> </nav>
Any of these classes aplied to the nav have the background-color property? If yes, try to put a !important after the color.
如果您曾经生成过脚手架,脚手架将带有默认的css样式,可以篡改您的CSS,所以请检查您的asset / stylesheet / scaffold.css并删除那里的css代码,看看它是否有帮助。
if you are using Bootstrap:
change navbar-dark
to navbar-white
or navbar-light
and add text-dark
<nav class="navbar navbar-expand-lg navbar-light text-dark" style="background-color: #d35400;">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.