Why i cant change nav-link color on CSS?

Question

1) Why I can not change the nav-link color on CSS?

I'm trying to change the color of MENUTEST's (nav-link) to white, but it's not working

and

2) Add a line white above every MENUTEST's texts (just like [u] but above) How to do it?

What do i'm doing wrong?

navbar.php

<header>
<nav class="navbar navbar-expand-sm navbar-light bg-faded fixed-top" style="background-color: #083F2C;">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Brand -->
<a class="navbar-brand" href="#"> <img src="img/logo.png" alt="" height="60" width="160"></a>

<!-- Links -->
<div class="collapse navbar-collapse" id="nav-content">
<ul class="navbar-nav">

<li class="nav-item">
<a class="nav-link" href="index.php">MENUTEST</a>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<!-- <a class="dropdown-item" href="#">Ana Tereza fala em São Paulo sobre o Direito de Regresso no Fomento Comercial</a> -->
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" id="Preview" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MENUTEST
</a>
<div class="dropdown-menu" aria-labelledby="Preview">
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>
<a class="dropdown-item" href="#">SUBMENUTEST</a>

</div>
</li>

<li class="nav-item">
<a class="nav-link" href="#">MENUTEST</a>
</li>

</ul>
</div>
</nav>
</header>

And navbar.css

/* MENUTEST */
.nav-link a {
  font-color: white;
}

/* SUBMENUTEST */
.dropdown-menu {
  background: #EDEFF1;
  height: auto;
  width: auto;
  padding-left: 5px;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #DDDDDD;
}

.dropdown-menu a {
  color: #78828D;
  font-size: 15px;
}

...............................................

score 2 · Answer 1 · answered Mar 20 '18 at 15:54

2

font-color is not a css property. You'll want to use color.

.nav-link a {
  // font-color: white;
  color: white;
 }

answered Mar 20 '18 at 15:54

Robotnicka

554
1
10
20

score 0 · Accepted Answer · answered Mar 20 '18 at 15:58

0

Try and take a little further than just the class and try -> li, a, .nav-link and then whatever css you want.

I can see you are using Bootstrap so it might be inheriting something. A trick I always use it to go to the Chrome browser and right click on the thing I want to change and click on "inspect" this will make it possible to see what css lies behind the item you want to change and you can then try to edit it in the browser and if it works copy that code and insert into your own css file.

Hope it helps :)

answered Mar 20 '18 at 15:58

Nadia Elida Aamand

24
5

Thank you! Your advice work What i changed was: .navbar-light .navbar-nav .nav-link { – Runsicky Mar 20 '18 at 16:11
Did u know how to do a line above the fonts? like Text But above... – Runsicky Mar 20 '18 at 16:12
use "text-decoration: overline"; – Nadia Elida Aamand Mar 20 '18 at 16:24
Lol! You saved me a lot! Thank you so much! One last thing is it possible to change this line spacing to the text and get a bigger line? I mean, more higher? – Runsicky Mar 20 '18 at 17:13
Not sure I understand.. There is something called line-height, maybe play with that? :) – Nadia Elida Aamand Mar 20 '18 at 17:24
Dont work ;\ Yep, i wanna change the line-height and the distance between text and line :S – Runsicky Mar 20 '18 at 17:36
Dont know why line height isn't working. Have you searched on google? – Nadia Elida Aamand Mar 20 '18 at 17:48

Mikiyas Ayele · Answer 3 · 2018-03-20T16:15:59.243

0

`<div class="menuBar">
    <ul>
        <li class="selected"><a href="index.php">HOME</a></li>
        <li><a href="two.php">PORTFOLIO</a></li>
        ....
   </ul>
</div>

// specific CSS for your menu
div.menuBar li.selected a { color: #FF0000; } 
// more general CSS
li.selected a { color: #FF0000; }`

How about this, have you tried using li.selcted a{color:#FF0000;}.

edited Mar 20 '18 at 16:15

answered Mar 20 '18 at 16:00

Mikiyas Ayele

63
1
8

.nav-link a { color:#1e1e1e; } Not change too :( – Runsicky Mar 20 '18 at 16:05
try this new answer that i posted – Mikiyas Ayele Mar 20 '18 at 16:21

Why i cant change nav-link color on CSS?

3 Answers3