bootstrap 4 navigation active link color

问题

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

回答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

回答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.

回答3:

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>

回答4:

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' );
});

来源：https://stackoverflow.com/questions/52429751/bootstrap-4-navigation-active-link-color