CODEWITHSUNDEEP
htmlcsstwitter-bootstrapsass
user5687432
user5687432

Reputation:

Sass CSS - Change Navbar-link color

I want to change the color of my navbar on Bootstrap 4 but It doesn't work, I don't understand why. I tried many things, but nothing

Here is the navbar with his little CSS 

<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
      <a class="nav-item nav-link active" href="#">HearthBreak <span     class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

.navbar{
    background-color: #252830;
    .nav-item, .nav-link{
        color: #FFF;
    }
}

Normally I can change the NavItem but I don't understand which child I need to change.

Upvotes: 0

Views: 1545

Answers (3)

Syden
Syden

Reputation: 8625

Add a more specific selector like .navbar.navbar-light.bg-faded (try to use !important only as last resort):

.navbar.navbar-light.bg-faded{
        background-color: #252830;
        .nav.navbar-nav>a.nav-item.nav-link {
            color: #fff;
        }
    }

Snippet below:

.navbar.navbar-light.bg-faded {
  background-color: #252830;
}
.nav.navbar-nav>a.nav-item.nav-link {
  color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
    <a class="nav-item nav-link active" href="#">HearthBreak <span     class="sr-only">(current)</span></a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

Upvotes: 1

Nitesh
Nitesh

Reputation: 1550

If you are trying to change the background-color of navbar, you may have to override "background-image" property as:

nav.navbar{
    background-color: red;
    background-image:none;
    .nav-item, .nav-link{
        color: #FFF;
    }
}

Upvotes: 0

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

the default color for <a> tag in bootstrap is blue,you need to override that by using ! important.I'm added the snippet below.

.navbar{
    background-color: #252830;
    
}
.nav-item, .nav-link{
        color: #FFF ! important;
    }
<nav class="navbar navbar-light bg-faded">
  <div class="nav navbar-nav">
      <a class="nav-item nav-link active" href="#">HearthBreak <span     class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link" href="#">About</a>
  </div>
</nav>

Upvotes: 0

Related Questions