CSS styles are not being applied in header

Question

I have a header.php file that I want to include in a CodeIgniter view. The header is shown but the problem is that the CSS styles that I have written inside the header.php file are not applied and I don't understand why. This is my header:

<html>
<head>
<title><?php echo $title;?></title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body >
<style>

.nav.navbar-nav li a{
color: #3232ff;
}
</style>

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <ul class="nav navbar-nav">
  <li><a href="#"> <span class="glyphicon glyphicon-home"></span> Home </a> 
</li>

  <li><a href="#"> <span class="glyphicon glyphicon-off"></span> Log out</a>
</li>
</ul>
  </div>
</nav>
</body>
</html>

P.S The weird thing is, if I include the css as inline styling , it works

https://stackoverflow.com/questions/6449386/base-url-function-not-working-in-codeigniter — z3nth10n, Aug 26 '17 at 14:43
Your code is working fine, try changing the color and you can see it: https://jsfiddle.net/Lubep1c6/ — BenM, Aug 26 '17 at 15:02
Check you do not have an odd character in front of the hex color definition. Use Element Inspector to see what CSS is actually being applied. — BenM, Aug 26 '17 at 15:12
Yes I know, but have you actually checked in element inspector? — BenM, Aug 26 '17 at 15:19
The specificity of the bootstrap css is too strong for you. Use !important — Brian Gottier, Aug 26 '17 at 15:42
**Do not use `!important`**! Write a more specific selector! — BenM, Aug 26 '17 at 16:16

score 1 · Accepted Answer · answered Aug 26 '17 at 15:49

1

The specificity of the bootstrap style forces you to use important:

<!doctype html>
<html>
<head>
<title>TITLE</title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
ul.navbar-nav li a {
    color: red !important;
}
</style>
</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 </a></li>
            <li><a href="#"> <span class="glyphicon glyphicon-off"></span> Log out</a></li>
        </ul>
      </div>
    </nav>
</body>
</html>

answered Aug 26 '17 at 15:49

Brian Gottier

4,522
3
21
37

**Do not use `!important`**! Write a more specific selector! – BenM Aug 26 '17 at 16:16
BenM, I believe bootstrap is already using !important for this style. This is bootstrap 3, but bootstrap 4 is doing it too. I don't think that writing a more specific selector can work in this case. – Brian Gottier Aug 26 '17 at 16:22

Lucas · Answer 2 · 2017-08-26T16:01:22.117

You're calling it wrong, You should remove the dot before the nav, that way you select the element. This is working and I've tested:

nav .navbar-nav li a{
color: #3232ff !importan;
}

This way you are referring to a .nav-bar class in a nav element. See result here:

<html>
<head>
<title><?php echo $title;?></title>
<link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body >
<style>
nav .navbar-nav li a{
color: #000000 !important;

}
</style>

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <ul class="nav navbar-nav">
  <li><a href="#"> <span class="glyphicon glyphicon-home"></span> Home </a>
</li>

  <li><a href="#"> <span class="glyphicon glyphicon-off"></span> Log out</a>
</li>
</ul>
  </div>
</nav>
</body>
</html>

No, check out `.navbar-nav`, the selector is correct. – BenM Aug 26 '17 at 15:10 — BenM, Aug 26 '17 at 15:10

CSS styles are not being applied in header

2 Answers2