Bootstrap navbar background color rules not working
<p>When I try to change my navbar background color it becomes grayed out in <code>Google Chrome</code> inspector. Can't find a working solution on google.</p>

<p>It does change when I removing navbar-default but then I don't get the toggle icon on smaller screens.</p>

<p>I've also tried to apply the rules to navbar-default but same results. the background-color doesn't change.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  font-family: "Courier New" ;
}  
.ttposter{
  color:black;
  height:400px;
  width:250px;
}

.navbar-custom {
  background-color:#e74c3c;
  color:#ffffff;
  border-radius:0;
  margin-bottom: 0;
}

.navbar-custom .navbar-nav &gt; li &gt; a {
  color:#fff;
}
.navbar-custom .navbar-nav &gt; .active &gt; a, .navbar-nav &gt; .active &gt;    a:hover, .navbar-nav &gt; .active &gt; a:focus {
  color: #ffffff;
  background-color:transparent;
}

.navbar-custom .navbar-brand {
  color:#eeeeee;
}
.headerImgText{
  color:white;
  margin: 10%;
}

body,html {
  height: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
&lt;!-- Optional theme --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
&lt;!--Custom css--&gt;
&lt;link rel="stylesheet" type="text/css" href="CSS/styles.css"&gt;
&lt;!--Javascript--&gt;
&lt;script type="text/javascript" src="scripts/movies.js"&gt;&lt;/script&gt;
&lt;title&gt;Homepage&lt;/title&gt;
&lt;/head&gt;
&lt;body onload="loadFeaturedMovies()"&gt;
  &lt;header&gt;
    &lt;nav class="navbar navbar-default navbar-custom navbar-fixed-top"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;a class="navbar-brand" href="#"&gt;Notflix&lt;/a&gt;
        &lt;/div&gt;

        &lt;!-- LINKS --&gt;
        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
          &lt;ul class="nav navbar-nav"&gt;
            &lt;li&gt;&lt;a href="index.html"&gt;HOME&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="movies.html"&gt;MOVIES&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="users.html"&gt;USERS&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="login.html"&gt;ACCOUNT&lt;/a&gt;&lt;/li&gt;

          &lt;/ul&gt;
          &lt;!-- LOGIN --&gt;
          &lt;form class="navbar-form navbar-right"&gt;
            &lt;div class="form-group"&gt;
              &lt;input type="text" id="loginUsername" class="form-control" placeholder="username"&gt;
              &lt;input type="password" id="loginPassword" class="form-control" placeholder="password"&gt;
            &lt;/div&gt;
            &lt;button type="submit" onclick="login()" class="btn btn-default"&gt;Login&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
</div>
</div>
</p>