Unterseite

Ich habe hier die aktive Navigation gelb markiert, indem ich in der ersten Zeile der Navi, im "section" Tag, das Attribut "global" entfernt habe und an dem jeweiligen Seiten-Link, anstelle der Bootstrap class="text-white", die class="text-success" vergeben habe.


Weiterhin habe ich den Hintergrund bei Hover geändert:

1) Class "navbar" das "padding" entfernt:

.navbar {
  background: @menuBgColor;
  transition: none;
  min-height: 77px;
  border-bottom: 2px solid #fff;
}

2) Class "nav-item" das "padding" geändert:

.nav-item {
  & span {
    padding-right: 0.4em;
    line-height: 0.5em;
    vertical-align: text-bottom;
    position: relative;
    text-decoration: none;
  }
  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.2rem 0 !important;
    margin: 0rem .65rem !important;
  }
}

3) die Hover-Farbe auf gelb geändert:

.nav-link:hover, .dropdown-item:hover {
  color: #ffbb33 !important;
}

4) und zusätzlich der Class "nav-item" bei Hover einen Transition-Effekt sowie eine Hintergrundfarbe gegeben: 

.nav-item:hover {
  transition: background-color 1.5s ease;
  background-color: rgba(15, 118, 153, 1);
}

5) außerdem habe ich jedem <li> der jeweiligen aktiven Seite eine abgedunkelte Hintergrundfarbe mit 50% Deckkraft in Form dieser zusätzlichen class="activeMenu"  gegeben:

<li class="nav-item activeMenu">

.activeMenu {
  background-color: rgba(15, 118, 153, 0.5);
}


Siehe auch dieses weitere Beispiel  für eine hervorgehobenen Navi Link.

Für eine Lösung mit JavaScript  und globaler Menüleiste guckt auch hier.