Link underlining won't go away!

1

Working on my personal portfolio and the nav bar links won’t stop underlining. text-decoration:none is no help, and when I try to change it from a to a:hover, all three links become selected.
Here’s what I’ve got right now.

2

Try this, just use plain a in your html

      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

and in your css, do this

.nav a {
  color:white;
  text-decoration: none;
}

.nav a:hover{
  text-decoration: underline;
}

the underline only shows when you hover.

3

You have a random } on line 24 of your CSS panel. Remove that, use plain <a>, as @owel suggested and your next rule will apply correctly.

Edit: You also have two versions of Bootstrap linked in your pen settings. Stick with one (or none)!

4

Thanks, that fixed it! Now I also want to make the text color change when I hover, but adding text-color: red; in the .nav a:hover class doesn’t do anything.

5

That would be because it’s just color:red; and not text-color:red;.

2 Likes
6

but adding text-color: red; in the .nav a:hover class doesn’t do anything.

There is NO text-color.

Try just color: #FF0000 :slight_smile:

2 Likes
7

One of my pet-peeve with CSS… sometimes inconsistent.

There’s font-family, font-weight, font-size, font-style
but no font-color
:slight_smile:

1 Like