Why text in the anchor tag is not visible?

user_13912373 0
Viewed 261

The text in the anchor tag like feature, pricing are not at all visible. I tried adding color attribute but it doesn't seem to work. It just changes the cursor to click, but I can see only white background.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark primary-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Feature ::::s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</nav>

bootstrap-4 css html
3 Answers

They're there - just white.

You need to set your background color on the nav - with bg-dark.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg bg-dark navbar-dark primary-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Feature ::::s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</nav>

user_68096190

navbar-dark is intended to be matched with dark background. So, all its childs are having foreground color of white. That's why the texts are there but can't be seen.

For using custom color as background, you need to use !important in the css for primary-color.

.primary-color {
    background-color: #234567 !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark primary-color">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
          <span class="sr-only">(current)</span>
        </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Feature ::::s</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</nav>

user_56742230

Actually the navbar has been entirely rewritten in bootstrap-4, in which .navbar-default is now .navbar-light, while .navbar-dark remains the same. One of these classes is required on each navbar. However, these classes no longer set background-colors; instead they essentially only affect color. So you have 2 options:

  1. Use any light background such as .bg-light when you use .navbar-light.
  2. Use any dark background such as .bg-dark when you use .navbar-dark.

Because you used .navbar-dark, I think you want dark navigational bar. If you want to make your navigation bar stand-out from the page body, use .bg-dark on nav tag. In case you want to show trasparent navigation bar on your page body, use.bg-dark on body tag instead.

user_138281240
Related