CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
cbuch1800
cbuch1800

Reputation: 943

Remove text colour of navbar links

I have created a navbar using Bootstrap. I have used .bg-danger to add a red background. For some reason, the navbar links appear blue and not black as expected since .navbar-light is used. How do I prevent the links from showing in blue font?

Here is the html for the navbar:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<nav class="nav navbar-expand-md bg-danger navbar-light nav-tabs sticky-top justify-content-center">
        <a class="nav-link" href='/home/'>Home</a>
        <a class="nav-link" href='/feed/'>Newsfeed</a>
        <a class="nav-link" href='/profiles/'>View Candidates</a>
        <a class="nav-link" href='/register/'>Register</a>
        <a class="nav-link" href='/elections/'>Elections</a>
    </nav>

Upvotes: 2

Views: 3721

Answers (4)

ValRob
ValRob

Reputation: 2682

what about : when is active:

class="nav-link active text-secondary"

when is inactive:

class="nav-link text-body"

Upvotes: 0

WebDevBooster
WebDevBooster

Reputation: 14964

There are 2 things you need to correct:

  1. Put your nav links into a div with the navbar-nav class
  2. Add the nav-item class to each nav link

This approach avoids unnecessary css hacks.

Here's the working code snippet (click the "run code snippet" button below and expand to full page): 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="nav navbar-expand-md bg-danger navbar-dark nav-tabs sticky-top justify-content-center">
    <div class="navbar-nav">
        <a class="nav-item nav-link" href='/home/'>Home</a>
        <a class="nav-item nav-link" href='/feed/'>Newsfeed</a>
        <a class="nav-item nav-link" href='/profiles/'>View Candidates</a>
        <a class="nav-item nav-link" href='/register/'>Register</a>
        <a class="nav-item nav-link" href='/elections/'>Elections</a>
    </div>
</nav>

Upvotes: 4

Rahul Khot
Rahul Khot

Reputation: 36

I think right now your links are taking up the default values provided in the bootstrap's default css. You can overwrite the link colors by using below code in your css and make sure it comes after bootstrap's default css.

.bg-danger .nav-link {
  color: #000000;
}

Upvotes: 0

Awanish
Awanish

Reputation: 367

Change your anchor tag to add style as below ??

style='color:black'

<a class="nav-link" style='color:black' href='/home/'>Home</a>

Upvotes: 1

Related Questions