bootstrap 4 navigation active link color

Question

i'd like to change the colour of the active menu links to green. I tried various ways (looking at the developper mode what rules applied from the framework), but it did not work. Can you please advise how to proceed? I'm using Bootstrap 4 and also mdbootstrap.

The HTML code:

  <nav class="navbar navbar-expand-md navbar-light sticky-top">

    <div id="navcontainer" class="d-flex container py-2 justify-content-center align-items-center">

<!-- Logo+Nev -->
      <div id="nevtitulus" class="d-flex align-items-start mr-lg-5 mr-md-3">
        <div>
          <img id="logo" class="mr-lg-3 mr-2" src="images/DRLJ_logo.png" alt="logo">
        </div>
        <!--logo-->
          <div class="text-center">
            <span id="logoname">Dr. Langmár Judit</span>
            <!-- hide on screens smaller than md -->
            <p id="logodesc" class="d-none d-md-block">Akupunktőr, üzemorvos, orthopaed szakorvos</p>
            <!-- hide on screens wider than sm -->
            <p id="logodesc2" class="d-md-none">Akupunktőr, üzemorvos, <br> orthopaed szakorvos</p>
          </div>
          <!--Nev+titulus-->
      </div> <!--logo+nev container-->

    <div id="hamburger-wrapper" class="ml-5 ml-md-0">

      <div id="button-wrapper" class="d-flex szelesseg justify-content-center">
<!-- hamburger menu -->
        <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target="#navcollapse" aria-controls="navcollapse"
            aria-expanded="false" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
      </div>
<!-- collapse navbar -->
        <div class="collapse navbar-collapse" id="navcollapse">
          <ul class="nav navbar-nav text-center">
            <li class="nav-item"><a class="nav-link" href="#fooldal">Főoldal<span class="sr-only">(current)</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#kezelesek">Kezelések</a></li>
            <li class="nav-item"><a class="nav-link" href="#arak">Árak</a></li>
            <li class="nav-item"><a class="nav-link" href="#galeria">Galéria</a></li>
            <li class="nav-item"><a class="nav-link" href="#rolam">Rólam</a></li>
            <li class="nav-item"><a class="nav-link" href="#kapcsolat">Kapcsolat</a></li>
          </ul>
        </div>
        <!-- collapse navbar -->
      </div>
      <!--hamburger-wrapper-->
    </div>
    <!--Navcontainer-->
    </nav>

THE CSS tricks I've tried so far, but did not work (only the hover is working):

.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: rgb(129, 91, 73);
background-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-nav .nav-item .nav-link:focus {
  color: #0DB159;
}

.navbar-light .navbar-nav .nav-item:active .nav-link {
  color: #0DB159;
}

#navcollapse a:active {
    color: #0DB159;
}

This one below works but only if the anchor tags that the nav is referring to are deleted from the body

.nav.navbar-nav .nav-item .nav-link:focus {
  color: #0DB159
}

I tried also these but did not work til' the anchor tags are in the body...

.nav.navbar-nav .nav-item .nav-link:focus,
.nav.navbar-nav .nav-item:focus,
.nav.navbar-nav .nav-item a:focus,
.nav.navbar-nav .nav-item .nav-link a:focus,
.nav.navbar-nav .nav-item .nav-link:active,
.nav.navbar-nav .nav-item:active,
.nav.navbar-nav .nav-item a:active,
.nav.navbar-nav .nav-item .nav-link a:active {
  color: #1c8a66}

On of my pal advised to use the .active class in the CSS, but this did not work either:

    .nav.navbar-nav .nav-item .nav-link.active {
      color: #1c8a66
   }

The anchor in the HTML:

<a class="anchor" id="kezelesek"></a>

Anchor class in CSS

a.anchor {
    display: block;
    position: relative;
    top: -57px;
    visibility: hidden;
}

Here you can see the problem: if the correspondinganchor tag exists the menu does not change colours:

https://www.w3schools.com/code/tryit.asp?filename=FVHSP1KJDQZY

Intimacy

Hi Zim! I updated the HTML code with the full Nav code. Thank you! – Intimacy

Updated the question with a working solution but it works only if I delete the anchor tag in the body... – Intimacy

Answer 1

You need to use CSS selectors that have the same specificity as the Bootstrap CSS selectors.

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item .nav-link:active,
.navbar-light .nav-item .nav-link:focus,
.navbar-light .nav-item:hover .nav-link {
    color: #00B159;
}

Demo: https://codeply.com/go/bsS6PogUFQ

Expiation

Thank you for the code, but unfortunately this is not working. The menu is green only on hover, not after clicking. :-( – Intimacy

Hi Zim! I updated the HTML code with the full Nav code. Thank you! – Intimacy

Answer 2

You can add active to li.nav-item only for the web page and html file you're currently on like so <li class="nav-item active">

In css use .active a and style that with conventional active link styles like so .active a { color: black; }

You can add a hover effect by targeting the last class element in the nav tag like so .sticky-top a:hover { color: black; }

If you're on the home page, that link should be the only one highlighted. You would need to go to other html files and to the same thing for the other li.nav-item tags.

Millisecond

Answer 3

I appreciate that I'm late to answering this question. However, after searching for the answer to this question myself, I stumbled across an answer that worked for me.

In short, I realized that I could accomplish the desired effect by adding "active" as a class for the link pointing to itself (the active page, or link pointing to the page I was editing). For example, if I click on Active Page Link from the home page I am taken to active_page.html. In that page's html file I need to update the html with the following:

<a class="nav-link active" href="../static/active_page.html">Active Page</a>

In other words, simply add "active" to anchor class where the link is pointing to itself (I hope that makes sense). In other words, for each link there is an .html page, and for each link pointing to the page that link is on add "active" to the a tag class (as above).

For further refinement, if you want to control the colour of the active link inspect the element to find the css line for the color applied and change the css file.

Archbishop

Answer 4

li.selected a { color: #0DB159; }

Html

<ul class="nav navbar-nav text-center">
            <li class="nav-item selected"><a class="nav-link" href="#fooldal">Főoldal<span class="sr-only">(current)</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#kezelesek">Kezelések</a></li>
            <li class="nav-item"><a class="nav-link" href="#arak">Árak</a></li>
            <li class="nav-item"><a class="nav-link" href="#galeria">Galéria</a></li>
            <li class="nav-item"><a class="nav-link" href="#rolam">Rólam</a></li>
            <li class="nav-item"><a class="nav-link" href="#kapcsolat">Kapcsolat</a></li>
</ul>

Merrythought

I just tried it, but it helps only on hover status to turn to green, not help with active status (menu clicked/selected) to change color. It is very strange, as if the menu item would not be active after clicking? In the developer mode I do not see signs of active after clicking the item. Even though it jumps to the anchor point. – Intimacy

I think you're trying to do select and not a:active, it would only change the color of the link when you click it. You should add a new class, example: .selected (or .active, whatever you want to name it) and when you select it, update the clicked/selected item with the selected class – Merrythought

Thank you but this .selected class did not work as well. :-( – Intimacy

Answer 5

Finally I managed to solve the issue, but outside bootstrap. It is a pity that basig bootstrap.js does not have this function that automatically moves the active state from one nav element to another...

I used this JS solution at the end to highlight active navigation menu:

https://codepen.io/gearmobile/pen/bByZdG

$( '#topheader .navbar-nav a' ).on( 'click', function () {
$( '#topheader .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});

Intimacy

Answer 6

I know this is an old post, but for those who want a simple solution, you can use CSS variables directly in the HTML style attribute to change the navbar active color, as long as your Bootstrap version is 5.2.0 or higher.

Related Bootstrap Docs

<nav class="navbar navbar-expand-lg" style="--bs-navbar-active-color: rgb(var(--bs-link-color-rgb));">

Theodosia