Why is my nav link still underlined? Even with !important declaration

Question

I'm not sure if this may be due to php/wordpress but I've got a nav bar that I just realised when you click the link it stays underlined until you hover it again? Seems strange to me I've never had this happen and can't quite work out why..

<nav>
   <ul>
      <li><a href="#"><img src=" " height="10%" width="10%"/>Link 1</a></li>

      <li><a href="#"><img src=" " height="10%" width="10%"/><a href="#">Link 2</a></li>

      <li><a href="#"><img src="" height="10%" width="10%"/><a href="#">Link 3</a></li>
   </ul>
</nav>

scss..

nav {
  margin: 0px;
  background-color: $nav_bgcolor;
  box-shadow: $nav_shadow;

   ul {
    color: #979797;
    padding: 0px;
    display: table;
    width: 100%;
    padding: 15px;
    margin: 0px;
    text-align: center;
  }
   ul li {
    list-style-type: none;
    display: inline-block;
    width: 30%;
  }
   ul li a {
    color: $font_color;
  }
   ul li a:hover {
    cursor: pointer;
    color: $hover;
  }
   a, a:visited, a:active, a:visited, a:focus, a:hover {
    text-decoration: none !important;
 }
}

underlines can come in many forms... borders, box-shadows, etc. etc. Try adding `border-bottom: 0 !important` and `box-shadow: none !important`. — Solomon Closson, Aug 16 '17 at 01:25
try changing your css rule to be more specific perhaps? like this instead: `ul > li > a, ul > li > a:visited, ul > li > a:active, ul > li > a:visited, ul > li > a:focus, ul > li > a:hover, ul > li` — Solomon Closson, Aug 16 '17 at 01:33
It could be also that a border is being added to the image instead... in which case, you'll need to target the `img` tag. — Solomon Closson, Aug 16 '17 at 01:35
Sadly no luck, I can't even inspect what its doing as once I go into it.. It disappears — snw123, Aug 16 '17 at 01:38
I rolled the question back to its original post. Please don't add "CLOSED" to it. Accepting an answer does that for you. — Funk Forty Niner, Aug 16 '17 at 02:10
Ohh okay, sorry I'm really new to stack overflow. Still understanding how it works — snw123, Aug 16 '17 at 02:19

score 0 · Answer 1 · edited Aug 16 '17 at 02:00

0

change your " ul li a" , to this:

nav ul li a {
color: $font_color;
text-decoration: none;
}

edited Aug 16 '17 at 02:00

Chandra Shekhar

3,550
2
14
22

answered Aug 16 '17 at 01:40

Yinkci Heart

160
1
14

score 0 · Answer 2 · edited Aug 16 '17 at 02:13

0

My code above was actually correct in fixing the problem I had. The problem was happening as it wasn't updating any of my code as the browser had cached the site. Thanks everyone for your help

NOTE: Delete browser history!!

edited Aug 16 '17 at 02:13

Funk Forty Niner

74,450
15
68
141

answered Aug 16 '17 at 02:01

snw123

21
4

score 0 · Answer 3 · answered Aug 16 '17 at 02:09

You Need some HTML Fixes. You have used anchor tag inside anchor tag.

HTML

<nav>
   <ul>
      <li>
        <a href="#">
          <img src="" height="10%" width="10%"/>Link 1
        </a>
      </li>

      <li>
        <a href="#">
          <img src="" height="10%" width="10%"/>Link 2
        </a>
       </li>

      <li>
        <a href="#">
          <img src="" height="10%" width="10%"/>Link 3
        </a>
      </li>
   </ul>
</nav>

CSS

/*Random colors use your colors here*/
$nav_bgcolor:red;
$nav_shadow:black;
$font-color:white;
$hover:green;

/*Random colors use your colors here*/

nav {
  margin: 0px;
  background-color: $nav_bgcolor;
  box-shadow: $nav_shadow;

   ul {
    color: #979797;
    padding: 0px;
    display: table;
    width: 100%;
    padding: 15px;
    margin: 0px;
    text-align: center;
  }
   ul li {
    list-style-type: none;
    display: inline-block;
    width: 30%;
  }
   ul li a {
    color: $font_color;
    text-decoration:none;
  }
   ul li a:hover {
    cursor: pointer;
    color: $hover;
  }
   a, a:visited, a:active, a:visited, a:focus, a:hover {
    text-decoration: none !important;
 }
}

Thanks, it happened when posting my question as I was removing some things, like the php call to add in an img. Basically i was shortening the code and i thought I cleared the but it was there all along thank you. — snw123, Aug 16 '17 at 03:10

Why is my nav link still underlined? Even with !important declaration

3 Answers3