Join PlatformM5
Beispiel Seite

Logo wurde per Default sehr klein auf 2.5rem
beim Scrollen in dieser Menüleiste
verkleinert.


ANPASSUNGEN NAVI
TRANSLATOR

Logo größer

In Zeile 283 auf 4.5rem geändert:

&.navbar-short {
  min-height: 60px;
  .navbar-logo {
    img {
      height: 4.5rem !important;
    }
}

Navigation highlighted

Die Menüleiste wurde auf jeder Seite einzeln mit hervorgehobenem, highlighted Link der aktiven Seite gestaltet.

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

Dazu wurde das "global" Attribut aus dem <section> Tag entfernt und jeder aktiven Seite eine andere Farbe im Text der Navi gegeben.

Die class="text-white" habe ich hier mit der class="text-primary" ersetzt.

Der Punkt neben dem aktiven Link hat folgende CSS, die ich ebenfalls noch an die class="text-primary myselect" mit ran geschrieben habe:

.myselect {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 20px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #aafc75;
    box-shadow: 0 0 0 5px rgba(red(#aafc75), green(#aafc75), blue(#aafc75), 0.2);
  }
}

Our Values

Tristique et egestas

Molestie a iaculis at erat pellentesque. Tellus integer feugiat scelerisque varius morbi enim nunc faucibus a. Fames ac turpis egestas maecenas pharetra convallis posuere. Posuere morbi leo urna molestie. Facilisis magna etiam tempor orci eu lobortis.

Nunc non blandit

Amet dictum sit amet justo donec enim diam vulputate. Ipsum dolor sit amet consectetur. Laoreet id donec ultrices tincidunt arcu. Et odio pellentesque diam volutpat commodo sed egestas. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate.

Facilisi nullam vehicula

Diam vulputate ut pharetra sit amet. Varius duis at consectetur lorem donec massa sapien faucibus. Urna duis convallis convallis tellus id interdum. Integer enim neque volutpat ac. Elit sed vulputate mi sit amet mauris commodo.

Cras tincidunt lobortis

Eget magna fermentum iaculis eu non diam phasellus vestibulum. At quis risus sed vulputate odio. Velit dignissim sodales ut eu sem integer. Tellus in hac habitasse platea dictumst vestibulum rhoncus est. Magna sit amet purus gravida quis. Proin fermentum leo vel orci.