title: bootstrap 4 navigation active link color
body: <p>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. </p>
  
  <p>The HTML code:</p>
  
  <pre><code>  &lt;nav class="navbar navbar-expand-md navbar-light sticky-top"&gt;
  
      &lt;div id="navcontainer" class="d-flex container py-2 justify-content-center align-items-center"&gt;
  
  &lt;!-- Logo+Nev --&gt;
        &lt;div id="nevtitulus" class="d-flex align-items-start mr-lg-5 mr-md-3"&gt;
          &lt;div&gt;
            &lt;img id="logo" class="mr-lg-3 mr-2" src="images/DRLJ_logo.png" alt="logo"&gt;
          &lt;/div&gt;
          &lt;!--logo--&gt;
            &lt;div class="text-center"&gt;
              &lt;span id="logoname"&gt;Dr. Langmár Judit&lt;/span&gt;
              &lt;!-- hide on screens smaller than md --&gt;
              &lt;p id="logodesc" class="d-none d-md-block"&gt;Akupunktőr, üzemorvos, orthopaed szakorvos&lt;/p&gt;
              &lt;!-- hide on screens wider than sm --&gt;
              &lt;p id="logodesc2" class="d-md-none"&gt;Akupunktőr, üzemorvos, &lt;br&gt; orthopaed szakorvos&lt;/p&gt;
            &lt;/div&gt;
            &lt;!--Nev+titulus--&gt;
        &lt;/div&gt; &lt;!--logo+nev container--&gt;
  
      &lt;div id="hamburger-wrapper" class="ml-5 ml-md-0"&gt;
  
        &lt;div id="button-wrapper" class="d-flex szelesseg justify-content-center"&gt;
  &lt;!-- hamburger menu --&gt;
          &lt;button class="navbar-toggler" type="button"
              data-toggle="collapse" data-target="#navcollapse" aria-controls="navcollapse"
              aria-expanded="false" aria-label="Toggle Navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
  &lt;!-- collapse navbar --&gt;
          &lt;div class="collapse navbar-collapse" id="navcollapse"&gt;
            &lt;ul class="nav navbar-nav text-center"&gt;
              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#fooldal"&gt;Főoldal&lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#kezelesek"&gt;Kezelések&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#arak"&gt;Árak&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#galeria"&gt;Galéria&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#rolam"&gt;Rólam&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#kapcsolat"&gt;Kapcsolat&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;!-- collapse navbar --&gt;
        &lt;/div&gt;
        &lt;!--hamburger-wrapper--&gt;
      &lt;/div&gt;
      &lt;!--Navcontainer--&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>THE CSS tricks I've tried so far, but did not work (only the hover is working):</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>This one below works but only if the anchor tags that the nav is referring to are deleted from the body</p>
  
  <pre><code>.nav.navbar-nav .nav-item .nav-link:focus {
    color: #0DB159
  }
  </code></pre>
  
  <p>I tried also these but did not work til' the anchor tags are in the body...</p>
  
  <pre><code>.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}
  </code></pre>
  
  <p>On of my pal advised to use the .active class in the CSS, but this did not work either:</p>
  
  <pre><code>    .nav.navbar-nav .nav-item .nav-link.active {
        color: #1c8a66
     }
  </code></pre>
  
  <p>The anchor in the HTML:</p>
  
  <pre><code>&lt;a class="anchor" id="kezelesek"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Anchor class in CSS</p>
  
  <pre><code>a.anchor {
      display: block;
      position: relative;
      top: -57px;
      visibility: hidden;
  }
  </code></pre>
  
  <p>Here you can see the problem: if the correspondinganchor tag exists the menu does not change colours:</p>
  
  <p><a href="https://www.w3schools.com/code/tryit.asp?filename=FVHSP1KJDQZY" rel="noreferrer">https://www.w3schools.com/code/tryit.asp?filename=FVHSP1KJDQZY</a></p>