Having an issue with changing the background color on a navbar.

Question

I am currently working on a band page and having issues with the navbar. I want the navbar to be black to match the logo of the band, but can't seem to change the background color despite trying it with all of the relevant classes on my css page.

<nav class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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="index_thekatellas.html"> 
          <img src="katellas.jpg">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-left">
        <li><a href="tour_thekatellas.html">Tour Dates</a></li>
        <li><a href="band_thekatellas.html">Band</a></li>
        <li><a href="music_thekatellas.html">Music</a></li>
      </ul>
</nav>

@tech2017 I've tried .navbar-default {background-color:black;} .collapse navbar-collapse {background-color:black;} .nav .navbar-nav .navbar-left {background-color:black;} — Dwayne Melendez, Jun 28 '17 at 15:55
Also seems your html is faulty. 2 of your divs have not been closed container and navbar-collapse — viCky, Jun 28 '17 at 16:03
Here's the link to the Jfiddle of the page. https://jsfiddle.net/dwayneam90/eu1whyxj/1/ — Dwayne Melendez, Jun 28 '17 at 16:12

score 0 · Answer 1 · 2017-06-28T16:14:10.223

You should use

 <nav class="navbar navbar-inverse">

It will look your nav bar black.

default is white so inverse is black.

<!DOCTYPE html>
<html lang="en"> 
<head>
  <title>My exam</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Inverted Navbar</h3>
  <p>An inverted navbar is black instead of gray.</p>
</div>

</body>
</html>

Having an issue with changing the background color on a navbar.

1 Answers1