Changing Bootstrap NavBar color

Question

I was attempting to change the navbar color in Bootstrap, but it was unsuccessful. The navbar just stays the same as if I never added the CSS or custom styling.

I added the custom CSS into my custom CSS file, style.css. Below is the entire contents of the style.css file.

You can also view my HTML below, which is the contents of index.htm which regard the navbar and styling.

Note: I'm using bootstrap from the latest version located at http://getbootstrap.com; not previous versions (Example: Twitter Bootstrap)

style.css

/* Custom Styling */

/* Core Styling */

body {
    font-famliy: Helvetica, sans-serif;
    font-size 14px;
    line-height: 1.42857143;
    color: #333;
}


/* Navbar Styling */

/* navbar */

.navbar-default {
  background-color: #14a3ff;
  border-color: #1495fe;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ecf0f1;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ecf0f1;
  background-color: #1495fe;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ecf0f1;
  background-color: #1495fe;
}
.navbar-default .navbar-toggle {
  border-color: #1495fe;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #1495fe;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ecf0f1;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecf0f1;
    background-color: #1495fe;
  }
}

index.htm

index.htm > styling (head)

<!-- Custom Styling -->
<link rel="stylesheet" href="css/style.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.min.css" /> -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />

index.htm > navbar & js (out of head)

<!-- Navbar -->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- 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">
            <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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <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-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <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-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

Answer 1

As of Bootstrap 4 you can easily change the colour of a navbar background with the 'bg' class. A few examples are below:

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse">
<img src="#" alt="Logo" style="width:300px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</nav>

It is a basic navbar which expands on larger devices, collapses on smaller ones, and sticks to the top of the page. The "bg-white" element changes the background colour of the navbar from the default grey colour to white. A few more examples are:

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white

Answer 2

I found the solution to the issue that was occurring. It was quite a simple issue actually.

The issue was that I was adding the bootstrap CSS in the HTML after the custom css was added.

So it should've been:

<head>

    <!-- Custom Styling -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />

</head>

Thanks for all the help.

Answer 3

Bootstrap NavBar Generator is what you need. It is a little bit tricky when you use the CSS generated.

In case you find that after you insert the generated stylesheet the NavBar does not change at all.

Please including the following was what made it possible to change the navbar color:

.navbar{ 
    background-image: none;
}

Hope this is helpful. :D