CODEWITHSUNDEEP
phpcsscodeigniter
eri
eri

Reputation: 119

CSS styles are not being applied in header

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

Upvotes: 1

Views: 1868

Answers (2)

Lucas
Lucas

Reputation: 15

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>

Upvotes: 0

Brian Gottier
Brian Gottier

Reputation: 4582

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>

Upvotes: 1

Related Questions