Spencer Alexander
Spencer Alexander

Reputation: 1

CSS not talking to navbar html class

I'm following along with a tutorial, and i feel like I'm doing everything mostly correct, but when i try to select the navbar class nothing happens. Here's the entire code

<!DOCTYPE html>
<html>
<head>
  <title>Image Gallary</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span> Brand</a>
    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <div class="jumbotron">
    <h1><span class="glyphicon glyphicon-camera" aria-hidden="true"></span> The Image Gallery</h1>
    <p>A Bunch Of Beautiful Images</p>
  </div>


<div class="row">
  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div>



  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div>



  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div><div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div>



  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div>



  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div><div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div>



  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div>



  <div class="col-lg-4 col-sm-6">
    <div class="thumbnail">
      <img src="https://graciebarra.com/wp-content/uploads/2014/08/www.stefankocev.com_-620x422.jpg" alt="...">
      </div>
  </div>
</div>

<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

I've tried using .navbar and .navbar-inverse to select the class and nothing works. If i do body { color: red; for example, it works fine. But when i try to select the actual navbar class, nothing seems to happen. Thank you!

Upvotes: 0

Views: 42

Answers (1)

dreijntjens
dreijntjens

Reputation: 4825

"https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" is loaded twice one time in the head and one time in the body. (just before the closing tag of the body). Bootstrap also have a selector .navbar and .navbar-inverse in it

When a selector is found twice it will take the last one which is defined. So either you have remove the bootstrap css loading in the body or load your own css after the bootstrap css in the body (And remove it in the head)

Upvotes: 2

Related Questions