Html Question posted in
Some basic documentation can be found here.

Need to give a color to a menu link in html css

Please find the code for navbar below. How can I give the color to the html link like Home, Services and About?

   <!--navbar-->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
    
    <div class="navimg">
    
      <img src="./img/Heliosupdated.png" alt="Description">

    </div>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-                 target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
     /button>
     <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>

     </ul>
    </div>
    </div>
    </nav>

I am expecting the color to be changed once the external CSS is being applied.

I tried to give this external css as mentioned below, I have tried to change the color. It won’t affect without adding an important! in the code.

.nav-link active a {
   color:#2762AC;
}

Please find the css below,

.navbar-nav {
    margin-left: auto;
}


.nav-link active a {
    color:#2762AC !important;
  }


/*Navbar style*/


/* end of Navbar style*/
/* end of Navbar style*/


#navbarNav{
    
    padding-top: 70px;
    padding-right: 240px;

}

.navimg img{
    width:100%;
    height: 97px;
}
Tags:

2

Answers


  1. 0

    use !important in your external css file

    .nav-link active a {
  color:#2762AC !important;
}
    Login or Signup to reply.
  2. 0

    Despite an answer already been accepted and upvoted, it looks like your CSS selector has a couple of errors, which would mean the !important wouldn’t have any effect.

    .nav-link active a means you’re looking for an <a> element within an <active> element within an element with the nav-link class.

    According to your HTML, you’re actually looking for an <a> element which has both classes of nav-link and active… which would suggest you actually want…

    a.nav-link.active {
  color: #2762AC;
}

    One note on the use of !important is that it should be considered a last resort.

    Instead you should utilise CSS Specificity if possible, where the calculated "weight" of your CSS selector is taken into account.

    In response to the comment by the OP…

    But this doesn’t work. I have to use important

    Then what you have provided is not a valid example of what is going on, and there is little we can do without a minimal reproducable example.

    Here is your code (with a correction on the </button> typo) with your CSS and my CSS in a runnable snippet. Note how that even with !important the link is not green, it’s red…

    /* Your CSS */
.nav-link active a {
   color:green !important;
}
/* My CSS */
a.nav-link.active {
   color:red;
}
    <!--navbar-->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
    
    <div class="navimg">
    
      <img src="./img/Heliosupdated.png" alt="Description">

    </div>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-                 target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
     </button> <!-- Typo Fixed -->
     <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>

     </ul>
    </div>
    </div>
    </nav>

    Using the CSS pasted into a comment by the OP, it still doesn’t work, the link does not change colour…

    But this doesn’t work. I have to use important

    /* Your CSS */
.navbar-nav { margin-left: auto; } .nav-link active a { color:#2762AC !important; } /*Navbar style*/ /* end of Navbar style*/ /* end of Navbar style*/ #navbarNav{ padding-top: 70px; padding-right: 240px; } .navimg img{ width:100%; height: 97px; }
    <!--navbar-->
   <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <div class="container-fluid">
    
    <div class="navimg">
    
      <img src="./img/Heliosupdated.png" alt="Description">

    </div>
    
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-                 target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
     </button> <!-- Typo Fixed -->
     <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>

     </ul>
    </div>
    </div>
    </nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search