How can I increase the opcacity of the nav items on my Bootstrap 4 navbar?

Issue

I'm using Bootstrap 4 and the text navigation items in the navbar are all coming up semi-transparent no matter what I try to adjust in the code. The background color for the navbar is a dark blue so the opacity is making it really hard to read the navigation links.

Here is the HTML code for the navbar.

<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
    <a class="navbar-brand" href="#">Brand</a>

     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">Nav Link 1</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Nav Link 2</a>
                </li>

            </ul>
        </div>
        </nav>

The opacity of the navigation items used to be just fine. However, whenever I shrunk the window down to a mobile size, the hamburger icon wasn't popping up. This was due to leaving out the navbar-dark class. Once I added that back in, the hamburger menu popped up no problem. However, that meant the opacity for the nav-items decreased.

Here is some of my CSS code for the navbar:

nav {
    background-color: #005C90;
}

nav.navbar {
    color: #F9FEFF;
}

.navbar-brand {
    font-size: 16pt;
}

.nav-item .nav-link{
    font-size: 14pt;
}

I have tried editing just about every class and tag combo I could think of but nothing is working. I attempted changing the color from hex to rgba to try and manipulate the opacity but nothing has worked. Only the navbar-brand is at full opacity.

I have attempted to adjust the CSS for the nav-items, nav-links, and what feels like every possible tag and class combination imaginable.

Solution

You could consider targeting the .nav-link elements, with CSS rule with a CSS selector specificity greater than (0, 3, 0) (or equal to if your custom CSS appears after Bootstrap's) to override the .navbar-dark .navbar-nav .nav-link rule from Bootstrap's CSS.

Then, you'd add a color declaration with a CSS color that you'd prefer for the link items.

Here is an example setting the links to full opaque white:

nav {
  background-color: #005c90;
}

nav.navbar {
  color: #f9feff;
}

.navbar-brand {
  font-size: 16pt;
}

.nav-item .nav-link {
  font-size: 14pt;
}

.navbar-dark .navbar-nav .nav-link[class] {
  color: #fff;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
  <a class="navbar-brand" href="#">Brand</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Nav Link 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Nav Link 2</a>
      </li>
    </ul>
  </div>
</nav>

Answered By - Wongjn