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.

I also tried it separately from my project and it works, inside the project it doesn't :/ — eli, Sep 17 '17 at 19:16
In your sample you are importing admin_header.css file which I did not, maybe there is the conflict. — aUXcoder, Sep 17 '17 at 19:30
Eli your question should be remove as it can not be reproduced. — aUXcoder, Sep 17 '17 at 19:47
@eli your code is working I think may be some cache issue try hard reload and than run. — Narendra Jadhav, Sep 18 '17 at 04:59

score 0 · Answer 1 · edited Sep 25 '17 at 07:45

0

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

edited Sep 25 '17 at 07:45

Martijn Pieters

1,048,767
296
4,058
3,343

answered Sep 17 '17 at 18:07

Demon

826
7
22

How do I add a class to navbar? – eli Sep 17 '17 at 18:26
I added more details. – Demon Sep 17 '17 at 18:30
Okay. Let me get a jsfiddle going on first and I will update my answer. – Demon Sep 17 '17 at 18:33

score 0 · Answer 2 · answered Sep 17 '17 at 18:10

0

Use this Code

.navbar-nav li a {
            color: white ! important;
        }

        .navbar-default {
            background-color: #3232ff !important;
        }

This will solve your problem.

answered Sep 17 '17 at 18:10

Aminur Rahman

400
1
6
14

is your admin_header.css file in root folder or other folder – Aminur Rahman Sep 17 '17 at 18:49
They're in the same folder – eli Sep 17 '17 at 18:54

score 0 · Answer 3 · answered Sep 17 '17 at 19:06

  .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>

css styles not being applied to bootstrap navbar

3 Answers3