0

I tried everything (Bootstrap4) and couldn't :

.nav.navbar-nav.navbar-right  li a {
    color: green;
}

Will not work.

The nav bar list is as follow :

 <div class="collapse navbar-collapse navbarSupportedContent">
              <ul class="navbar-nav ml-auto">
                   <li class="nav-item">
                       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Home</a>
                   </li>
                   <li class="nav-item">
                       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Create</a>
                   </li>
               </ul>
           </div>

Also couldn't change the font.

Curnelious
  • 1
  • 16
  • 76
  • 150

2 Answers2

1

I guess you are keeping the above code enclosed in tag. You can use the given css.

nav.navbar-nav>li.nav-item>a {
color: green;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
}
Jenish Shrestha
  • 196
  • 5
1

You should change the code like this, I have made working example kindly see it https://www.bootply.com/fOgwVUAbzr

Html:

<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
    <li class="nav-item">
       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Home</a>
    </li>
    <li class="nav-item">
       <a class="nav-link" href="#home"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;Create</a>
     </li>
    </ul>
  </div>
</nav>

CSS:

.navbar-nav li a {
    color: green;
}
Maniraj Murugan
  • 8,868
  • 20
  • 67
  • 116
  • Why should I change my code to this? because it works? but i wonder what is wrong with mine.. – Curnelious Dec 11 '18 at 14:18
  • @Curnelious, In your code many thing is missing, Navbar needs to have like this ``` – Maniraj Murugan Dec 11 '18 at 14:43