Why isn't my navbar text changing color with CSS?

Issue

With the following HTML and CSS I can’t seem to be able to change the text color of the hyperlinks in blue or purple? What am I missing?

nav ul {
  /* Navbar unordered */
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  /* Navbar ordered */
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  /* Navbar on mouse hover */
  background-color: #1f2926;
  color: white;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

I have tried making using of !important to no avail. The only successful method I found is wrapping it in the HTML code itself as such:

<li><a style="color: white" href="index.html">Home</a></li>

Solution

You’re setting the color to the li instead of a.

a element has a default color so you need to select it.

a { 
  color: white;
}
nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

a {
  color: white;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Or on (li) hover :

nav li:hover a {    
  color: white;
}
nav ul {
  list-style: none;
  text-align: center;
  background-color: #495e57;
  border-radius: 10px;
}

nav li {
  display: inline-block;
  padding: 20px;
  font-size: 1.5rem;
  border-radius: 10px;
}

nav li:hover {
  background-color: #1f2926;
}

nav li:hover a {
  color: white;
}
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="menu.html">Menu</a></li>
    <li><a href="book.html">Book</a></li>
    <li><a href="about.html">About</a></li>
  </ul>
</nav>

Answered By – Cédric

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published