Overwriting Bootstrap 4 Navbar Link Color

Question

Good night everyone,

I've been playing around with Bootstrap 4 and made a simple Navbar and wanted to change the font-size and the color (or hover color) but for some reason the font-size seems to work, but the color not. I also can't seem to add additional padding between each item. I thought as long as I insert the custom CSS file after the Bootstrap 4 I can simply overwrite stuff. (It's for a course I'm attending, so please don't mind the Halo Topic)

main {
    color: brown;
    padding: 50px;
    height: 1200px;
}

#Wallpaper {
    height: 220px;
    width: 100%;
}

#sticky-footer {
    height: 60px;
}

nav ul li a {
    font-size: 17px;
    color: brown;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Master Chief</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>    
    <link rel="stylesheet" type="text/css" href="WebsiteCSS.css">
 
  </head>


<body>

<img id="Wallpaper" src="/Website/Images/HomeWallpaper.png" alt="Halo Wallpaper"> 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <!-- Masterchief Logo -->
  <a class="navbar-brand" href="#">
    <img src="/Website/Images/Logo.png" alt="Halo Logo" style="width:40px;">
  </a>
        
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Halo</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Handlung</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Fraktionen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Master Chief</a>
    </li>
  <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
          Spielreihe
      </a>
      <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Halo</a>
          <a class="dropdown-item" href="#">Halo 2</a>
          <a class="dropdown-item" href="#">Halo 3</a>
          <a class="dropdown-item" href="#">Halo Wars</a>
          <a class="dropdown-item" href="#">Halo Reach</a>
          <a class="dropdown-item" href="#">Halo 4</a>
          <a class="dropdown-item" href="#">Halo 5: Guardians</a>
      </div>
    </li>
  </ul>
</nav>
<main>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio reiciendis consectetur architecto cumque? Iste reprehenderit magni dicta ex iusto officia ducimus dolorum? Consequuntur esse numquam, illum sit sapiente officiis?
</main>
<footer id="sticky-footer" class="py-3 bg-dark text-white-50">
  <div class="container text-center">
    <small>Copyright &copy; Master Chief</small>
  </div>
</footer>
</body>

</html>

score 0 · Accepted Answer · answered Jan 12 '20 at 18:11

The easiest solution is to use !important in your CSS.

main {
    color: brown;
    padding: 50px;
    height: 1200px;
}

#Wallpaper {
    height: 220px;
    width: 100%;
}

#sticky-footer {
    height: 60px;
}

nav ul li a {
    font-size: 17px;
    color: brown !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Master Chief</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>    
    <link rel="stylesheet" type="text/css" href="WebsiteCSS.css">
 
  </head>


<body>

<img id="Wallpaper" src="/Website/Images/HomeWallpaper.png" alt="Halo Wallpaper"> 

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <!-- Masterchief Logo -->
  <a class="navbar-brand" href="#">
    <img src="/Website/Images/Logo.png" alt="Halo Logo" style="width:40px;">
  </a>
        
  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Halo</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Handlung</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Fraktionen</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Master Chief</a>
    </li>
  <!-- Dropdown -->
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
          Spielreihe
      </a>
      <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Halo</a>
          <a class="dropdown-item" href="#">Halo 2</a>
          <a class="dropdown-item" href="#">Halo 3</a>
          <a class="dropdown-item" href="#">Halo Wars</a>
          <a class="dropdown-item" href="#">Halo Reach</a>
          <a class="dropdown-item" href="#">Halo 4</a>
          <a class="dropdown-item" href="#">Halo 5: Guardians</a>
      </div>
    </li>
  </ul>
</nav>
<main>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio reiciendis consectetur architecto cumque? Iste reprehenderit magni dicta ex iusto officia ducimus dolorum? Consequuntur esse numquam, illum sit sapiente officiis?
</main>
<footer id="sticky-footer" class="py-3 bg-dark text-white-50">
  <div class="container text-center">
    <small>Copyright &copy; Master Chief</small>
  </div>
</footer>
</body>

</html>

If you wanted to change the font color of the navbar links, it works, check by running my code snippet. — Tamas Szoke, Jan 12 '20 at 18:33
Im sorry, apparantly something is wrong with my localhost, even though i refresh the page it doesnt seem to do anything. It worked after a restart. Is it actually possible to use the nav-tabs to display certain things with only HTML? — Mike_AZ, Jan 13 '20 at 11:03
Sometimes you need control+F5 to force a cache refresh, yes check the second half of the docs at https://getbootstrap.com/docs/4.0/components/navs/ — Tamas Szoke, Jan 13 '20 at 12:22
Okay i actually found out, using Private Mode solves the issue, because it appears that my regular browser saves the website in the cache and doesnt renew it till a restart. Good to know :), also ty for the link — Mike_AZ, Jan 15 '20 at 09:58

score 0 · Answer 2 · answered Jan 12 '20 at 21:23

0

use inspect element (right click the element and click inspect) in your project. you will find where the color is applied.

selector used to apply color is shown in inspection. so copy selector path and overwrite with your style. example:

.navbar-dark .navbar-nav .nav-link{
   color: brown;
}

answered Jan 12 '20 at 21:23

DohaHelmy

770
1
7
19

1

Awsome i didn't know about that, that makes it kinda easy to overwrite it with CSS :) – Mike_AZ Jan 13 '20 at 10:56

Overwriting Bootstrap 4 Navbar Link Color

2 Answers2