Removing underline

Question

I have tried text-decoration: none; and everything else but nothing is taking the underline off the link. Here is my current html and css:

nav-wrapper .navbar-header a h3 {
  color: #fff;
  font-weight: 200;
  margin-top: 10px;
  letter-spacing: 4px;
}

.nav-wrapper .navbar-header a :hover,
.navbar-header a :focus {
  text-decoration-line: none !important;
  color: #506C69;
}

<body data-spy="scroll" data-target=".navbar-fixed-top" data-offset="65">

  <header>
    <nav class="navbar company-top-nav navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="nav-wrapper">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#company-menu">              
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                          </button>

            <a href="index.html">
              <h3>Some Text</h3>
            </a>

          </div>

there is extra space between `a` and `:hover`, and `a` and `:focus` in your CSS — vronjec, Jun 12 '18 at 22:30
wow, it's been a long day, thank you lol. That was the issue — Jo ball, Jun 12 '18 at 22:32

score -1 · Answer 1 · answered Jun 12 '18 at 22:33

This is just a typo. Remove the space between the element and the state in your CSS:

nav-wrapper .navbar-header a h3 {
  color: #fff;
  font-weight: 200;
  margin-top: 10px;
  letter-spacing: 4px;
}

.nav-wrapper .navbar-header a:hover,
.navbar-header a:focus {
  text-decoration-line: none !important;
  color: #506C69;
}

<body data-spy="scroll" data-target=".navbar-fixed-top" data-offset="65">

  <header>
    <nav class="navbar company-top-nav navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="nav-wrapper">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#company-menu">              
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                          </button>

            <a href="index.html">
              <h3>Some Text</h3>
            </a>

          </div>

Removing underline

1 Answers1