Navbar container won't change color

Viewed 165

I'm trying to change the header-nav background color to yellow and it won't change for me, it just stays white/blank.

I'm trying to learn along a html, css, javascript course and i'm following along with the instructor as he makes a website. When he changes the header-nav background color to yellow it changed for him but not for me, and as far as I could see we had the same code. I've tried a couple different hex colors but it didn't make a difference.

 <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">
    <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
  </head>
<body>
  <header>
    <nav id="header-nav" class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a href="Index.html" class="">
            <div id="logo-img" alt="Logo image"></div>
          </a>

      </div>
    </div>


    </nav>

  </header>
  <!-- jQuery (Bootstrap JS plugins depend on it) -->
  <script src="js/jquery-2.1.4.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/script.js"></script>





body {
    font-size: 16px;
    color: #fff;
    background-color: #61122f;
    font-family: "Oxegyn" , sans-serif;
}


/** HEADER **/
#header-nav {
    background-color: #f6b319;
    border-radius: 0;
    border: 0;
}

#Logo-img {
    background: url(Resteraunt.jpeg) no-repeat;
    width: 150px;
    height: 150px;
    margin: 10px 15px 10px 0;
}

There is no error code. It just shows a clear/white area where the header container is, but no color.

2 Answers

The reason for this class="navbar navbar-default" has a predefined color. Might want to verify this first.

You can try :

background-color: #f6b319 !important;

Another quick fix would be to update your code :

<nav id="header-nav" class="navbar navbar-default" style="background-color: #f6b319;">

Since your following bootstrap, you could refer the documents: https://getbootstrap.com/docs/4.0/components/navbar/

I have tried it with bootstrap imported with:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

and it works.. maybe in your bootstrap file there are rules for navbar navbar-default background color.

So try to:

  • modify the order of importing or
  • adding !important to nav-bar background in your css style or
  • insert the style inline
Related