Changing a color of an active nav link

Question

<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active Home-active">
            <a class="nav-link" href="index.html"> Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="product.html">Product</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="occasions.html"> Occasions</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="bicyclerepair.html">Bicycle repair</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="product-single.html">Single product</a>
          </li>
          <li class="nav-item ">
            <a class="nav-link " href="contact.html">Contact</a>
          </li>

    .nav-d .nav-item:hover {
  border-bottom: 3px solid #262262 ;
}

.Home-active{
  border-bottom: 3px solid #262262 ;
 
}

      .nav-link{
    font-family: 'Lato', sans-serif;
    color: #666666;
    letter-spacing: 0px;
    font-size: 18px;
    font-weight: 900;
  }

so when I add on Home-active a border-bottom it works (so when active on the page it will show borderbottom) but the text Home for example doesn't change color it is still grey instead of this dark purple. how can I change the color from grey to dark purple of the text while it is active on the page.

This `.Home-active` class doesn't seem to set any `color`. – Yom T. Nov 13 '20 at 13:17 — Yom T., Nov 13 '20 at 13:17
`.Home-active a.nav-link{color:red}`? – Sfili_81 Nov 13 '20 at 13:17 — Sfili_81, Nov 13 '20 at 13:17

Changing a color of an active nav link

0 Answers0