css styles not being applied to bootstrap navbar
Question
I am trying to change the background color of my navbar, but it's not working. This is my html :
<html>
<head>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="admin_header.css">
</head>
<body >
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li><a href="#"> <span class="glyphicon glyphicon-home"></span> Home page </a> </li>
<li><a href="#"> <span class="glyphicon glyphicon-off"></span> Log out</a></li>
</ul>
</div>
</nav>
</body>
</html>
This is my css:
.nav.navbar-nav li a{
color: white !important;
}
.navbar-default {
background-color: #3232ff !important;
}
Before, my css file was like below and it worked:
.nav.navbar-nav li a{
color: #3232ff !important;
}
Now, there is something weird going on, because before i was using the same css file with styles for the anchor link color only. Now that I changed it and also added styles for the background color of navbar it doesn't work.The color remains the same as before I made the changes.
3 answers
solution1
0 2017-09-17 18:07:03
Try adding a class to your navbar, Bootstrap is overwriting your styles.
for example in your css you could do
.myNavbar.nav.navbar-nav li a {}
edit: In your html page you are creating, for example just add to <ul class="nav navbar"> this <ul class = "myNavbar nav navbar-nav" >
edit: here is a jsfiddle It seems that you don't really understand the important! flag https://jsfiddle.net/DTcHh/37347/
Quoting slebetman :
- Never use !important on site-wide css.
- Only use !important on page-specific css that overrides site-wide or foreign css (from ExtJs or YUI for example).
- Never use !important when you're writing a plugin/mashup.
- Always look for a way to use specificity before even considering !important
solution2
0 2017-09-17 18:10:13
Use this Code
.navbar-nav li a {
color: white ! important;
}
.navbar-default {
background-color: #3232ff !important;
}
This will solve your problem.
solution3
0 2017-09-17 19:06:07
.navbar-nav li a { color: white !important; } .navbar-default { background-color: #3232ff !important; }
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <ul class="nav navbar-nav"> <li><a href="#"> <span class="glyphicon glyphicon-home"></span> Home page </a> </li> <li><a href="#"> <span class="glyphicon glyphicon-off"></span> Log out</a></li> </ul> </div> </nav> </body> </html>
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.