Bootstrap 4 Navbar color won't change

Question

I am looking to change the color of my navbar text but I simply can't figure it out. I have managed to change the brand color by using

.navbar .navbar-brand {
color: red;}

When I try using

.navbar .navbar-nav {
color: red;}

Nothing changes.

Here is my navbar code I am using.

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <a class="navbar-brand" href="#">Navbar</a>
   <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
         <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="#">Features</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
               <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
   </div>
</nav>

score 1 · Answer 1 · answered Sep 15 '17 at 10:40

1

.navbar .navbar-nav > li {
  color: red;
}

OR

.navbar .navbar-nav > li > a {
  color: red;
}

Try this.

answered Sep 15 '17 at 10:40

kyun

9,710
9
31
66

Neither of them are working :/ – Sep 15 '17 at 10:50

kravisingh · Answer 2 · 2017-09-15T10:49:39.733

You need to add a to your css.

.navbar .navbar-nav a {
  color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
   <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
   </button>
   <a class="navbar-brand" href="#">Navbar</a>
   <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
         <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="#">Features</a>
         </li>
         <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
         </li>
         <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
               <a class="dropdown-item" href="#">Action</a>
               <a class="dropdown-item" href="#">Another action</a>
               <a class="dropdown-item" href="#">Something else here</a>
            </div>
         </li>
      </ul>
   </div>
</nav>

You can also check Fiddle

score 0 · Answer 3 · answered Sep 15 '17 at 10:46

0

you have to load you css after bootstrap css and use your own class or id with combination bootstrap's class

.navbar .navbar-nav {
    color: red;
}

to

  .navbar .navbar-nav.myclass {
    color: red;
}

if this will not work use !important in your css but i dont suggest you to use that often because its hard to override css attached via !important for example

 .navbar .navbar-nav.myclass {
    color: red !important;
}

or

.navbar .navbar-nav{
        color: red !important;
    }

answered Sep 15 '17 at 10:46

Jano_Bokuchava

21
1
5

I understand that my css is to overwrite the contents of bootstraps. Neither of these suggestions are working for me anyway. – Sep 15 '17 at 10:52
If so you can add extra tag to your css selector .. in this case a tag this will solve your problem – Jano_Bokuchava Sep 16 '17 at 11:43

Bootstrap 4 Navbar color won't change

3 Answers3