Home-Icon statt Text in der Navigation anzeigen

Nachfolgend eine Lösung, in der Navigation statt dem Text ein Home-Icon anzuzeigen.

1. Verschiebe die speziale Seite "Startseite" in die Linkgruppe "megamenu".
   
2. Vergebe die Sortierung "1".
   
3. Öffne den Theme Editor mit dem Theme "MyClear".
   
4. Wähle die Datei "custom.scss" aus und füge nun folgende Anweisung ein.

1. .nav-item {
2.     &.order-lg-1 {
3.         .nav-link {
4.             span {
5.                 display: none;
6.             }
7.             &::before {
8.               content: "\f015";
9.               font-family: 'Font Awesome 5 Free';
10.               font-weight: 900;
11.               line-height: 1;
12.             }
13.         }
14.     }
15. }

Sollte der Text "Home" oder "Startseite" nach Theme-Kompilierung sichtbar sein, bitte durch diesen ersetzen:

1. header {
2.     .navbar-nav {
3.         > .nav-item.order-lg-1 {
4.             > .nav-link {
5.                 font-size: 0px;
6.                 &::before {
7.                   content: "\f015";
8.                   font-family: 'Font Awesome 5 Free';
9.                   font-weight: 900;
10.                   line-height: 1.5;
11.                   font-size: $font-size-base;
12.                 }
13.             }
14.         }
15.     }
16. }

Speichere nun die Datei, den Button steht unten.

Anschliessend klicke oben rechts auf den Button "Theme kompilieren".

• Related Articles

• Fontawesome Icons in der Pulldown-Navigation anzeigen

  Beim Trade-Template ist es möglich neben der Kategoriennamen kleine Icons darzustellen. Die Icons sind eine Schriftart, namens Font Awesome. Ein neues Funktionsattribut anlegen Erstelle in JTL-Wawi ein neues Funktionsattribut für den Bereich ...

• Eigene Badges in der Pulldown-Navigation

  Beim Trade-Template ist es möglich neben der Kategorienamen auch kleine Badges anzuzeigen. Das können kleine Hinweise sein, wie Neu, Top, Best etc. Ein neues Funktionsattribut anlegen Erstelle in JTL-Wawi ein neues Funktionsattribut für den Bereich ...

• Topbar in der mobilen-Version anzeigen lassen

  Nachfolgend eine Anleitung, wie man im Template in der mobilen Version die Topbar bzw. den Topbar-Hinweis anzeigen lassen kann.  Eine neue Header-Vorlage anlegen Erstelle im Child-Template eine neue Vorlage namens "header.tpl" mit folgendem Inhalt. ...

• Slide-Out Navigation

  Die Slide-Out Navigation bietet eine interessante, übersichtliche Alternative für das Megamenü.  Beim Klick auf das Menü-Button fährt die Navigation von links nach rechts aus.

• E-Mail Adresse in der Topbar platzieren

  Diese Funktion steht lediglich bei folgenden Templates zur Verfügung: Flex Es soll im Kopfbereich neben der Telefonnummer auch eine Email-Adresse platziert werden. Wie das genau geht, geht in diesem Artikel. Alle Anpassungen führen wir standardmäßig ...