How to change Bootstrap navbar link color

HTML-CSS
1

Hi friends,
I’m using Bootstrap 5 navbar for navigation menu.
I would like to change the color of nav-link and active link color.
How can I achieve this?
I have tried this:

.navbar-light .navbar-nav .nav-item .nav-link {

  color: orange;

}

.navbar-nav > .active > .a {

  color: red;

}

The link color change but active link color does not change

1 Like
2

I would neet to see your html structure to better answer this, but try removing the direct child selectors on the second ruleset and the last class selector. (Replace the second ruleset with this)

.navbar-nav .active {
  color: red;
}

You currently not targeting a link with an active class but a direct child of an element with an active class with an a class itself.

3

That angle bracket ( > ) means direct children.

<ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
</ul>

You can see here that you dont have any direct child with class active .

You can select it either by

.navlink.active{}

Or

.navbar-nav .active{}
4

Thank you very much for you help.
Here is my HTML structure

 <header id="header">
      <nav class="navbar navbar-expand-md navbar-light fixed-top" id="nav-ber">
        <div class="container-fluid">
          <a class="navbar-brand" href="#"
            ><img src="images/enricherlogo.png" alt="enricher logo" height="60"
          /></a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarCollapse"
            aria-controls="navbarCollapse"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ms-auto mb-2 mb-md-0">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#home"
                  >Home</a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#features">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#about">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contact">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

I have tried your suggestion but the color does not change.

5

Add important .

.active{
    color:red !important;
}
6

:smiling_face_with_three_hearts: Your solution work for me. Thank you.

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.