I want to change the background-color of my Bootstrap navigation bar.

Question

I want to change the background color of the bootstrap navigation bar.

This is how it looks at the moment.

The html code that i used.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Complete Bootstrap 4 Website Layout</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
 <link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link disabled" href="#">Team</a>
      <a class="nav-item nav-link disabled" href="#">Connect</a>
    </div>
  </div>
</nav>

score 1 · Accepted Answer · answered Nov 26 '18 at 22:01

Remove the bg-light class and set any color you want to your navbar class. Note that the bg-light has !important in the value which means it will override properties that are not important. you can use inline style with ~important, it can do the trick as well but not a good practice.

.navbar{
  background-color: #bada55 !important;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Complete Bootstrap 4 Website Layout</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
 <link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link disabled" href="#">Team</a>
      <a class="nav-item nav-link disabled" href="#">Connect</a>
    </div>
  </div>
</nav>

Tahi Reu · Answer 2 · 2018-11-26T22:15:57.607

Your navbar background color is under !important rule:

.bg-light {
    background-color: #f8f9fa!important;
}

You can try overwriting that value with another !important css rule, but with longer css path. This way your !important rule will have priority over first !important rule.

Something like:

.navbar.bg-light {
    background-color: {your-desired-color} !important;
}

P.S. I wouldn't say it's a bad practice, but using !important rule should be avoided if you are not sure why you are using it. So, if you can edit your HTML, just remove bg-light class from <nav> element, and you will be able to change color for it without !important.

score 0 · Answer 3 · answered Nov 26 '18 at 22:08

you change the bg-light bg-light2 and write you want color.

.bg-light2{background-color:red }a.bg-light2:focus,a.bg-light2:hover,button.bg-light2:focus,button.bg-light2:hover{background-color:#dae0e5}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Complete Bootstrap 4 Website Layout</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
 <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
 <link href="style.css" rel="stylesheet">
</head>
<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light bg-light2">
  <a class="navbar-brand" href="index.html"><img src="img/logo.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <!--'ml-auto' puts the navigation buttons to the right hand side when it is on a medium screen-->
    <div class="navbar-nav ml-auto">
      <a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">About</a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link disabled" href="#">Team</a>
      <a class="nav-item nav-link disabled" href="#">Connect</a>
    </div>
  </div>
</nav>

I want to change the background-color of my Bootstrap navigation bar.

3 Answers3