# Header Navigation Links formatieren

**URL:** <https://forum.shopware.com/t/header-navigation-links-formatieren/58994>\
**Category:** Themes & Design\
**Created:** [9. April 2019 um 00:15 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994 "2019-04-09T00:15:35Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![HenkEvans](https://avatars.discourse-cdn.com/v4/letter/h/fbc32d/32.png) [@HenkEvans](https://forum.shopware.com/u/HenkEvans)\
**Post date:** [9. April 2019 um 00:15 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/1 "2019-04-09T00:15:35Z")

</div>

Hallo,

wie kann ich einzelne Links im Header formatieren.

Ich meine die Links, die automatisch im Header erscheinen, wenn man eine Kategorie anlegt.

&nbsp;

Ich habe viel recherchiert, werde aber nicht schlau.

Hab unter **themes** \*\* &nbsp;/ Frontend / mein theme&nbsp;/ frontend&nbsp;/ \_public&nbsp;/ src&nbsp;/ less&nbsp;/ \_modules&nbsp;/\*\*

sowohl&nbsp; **header.less&nbsp;** als auch&nbsp; **main-navigation.less&nbsp;** angelegt sehr viel ausprobiert, ohne Erfolg.

Unter&nbsp; **Einstellungen / Caches/Performance / Caches/Performance / Cache / Alle auswählen** habe&nbsp;ich immer **leeren + Themes kompilieren** &nbsp;gemacht.

&nbsp;

Kann jemand helfen?

Vielen Dank.

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [9. April 2019 um 08:50 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/2 "2019-04-09T08:50:02Z")

</div>

Mit ein bisschen CSS geht das recht fix:

```
.navigation--link span {
    color: myawesomecolor;
}

```

Du kannst natürlich in den LESS Datei rumfurwerken, aber ich würde Dir empfehlen eine weitere CSS Datei in Dein Theme zu basteln und dort dann sämtliche Änderungen vorzunehmen. Das erspart Dir das lästige Cache leeren…

---

<div class="post-metadata">

**Author:** ![HenkEvans](https://avatars.discourse-cdn.com/v4/letter/h/fbc32d/32.png) [@HenkEvans](https://forum.shopware.com/u/HenkEvans)\
**Post date:** [9. April 2019 um 09:40 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/3 "2019-04-09T09:40:58Z")

</div>

Vielen Dank für den Tipp.

Allerdings weiß ich gerade Ort und Name nicht.

Ich vermute mal, dass der Speicherort&nbsp; **themes/Frontend/mein theme/frontend/\_public/src/css** ist?

Aber wie der Name der Datei lauten soll, weiß ich absolut nicht.

Template.css, header.css, navigation.css, main-navigation.css uvm. funktionierten schon mal nicht.

Sorry, bin Anfänger in solchen Sachen.

&nbsp;

Trotzdem Danke.

---

<div class="post-metadata">

**Author:** ![HenkEvans](https://avatars.discourse-cdn.com/v4/letter/h/fbc32d/32.png) [@HenkEvans](https://forum.shopware.com/u/HenkEvans)\
**Post date:** [10. April 2019 um 16:43 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/4 "2019-04-10T16:43:50Z")

</div>

push

Sorry Leute, ich komme nicht weiter. 🙂

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [10. April 2019 um 17:13 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/5 "2019-04-10T17:13:24Z")

</div>

Ok, den richtigen Ort für Deine zusätzliche CSS Datei hast Du ja schon mal richtig erraten! ![Wink](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/wink.png "Wink")

Wie die Datei heißt ist eigentlich vollkommen schnuppe! Die kann heißen wie Du willst!?

Leg Dir also mit einem simplen Texteditor (nicht WORD!) diese leere Datei an und nenne sie z.B. my-awesome-stylesheet.css

Dort hinein schreibst Du dann z.B. folgendes

```
.navigation--link span {
    color: red;
}

```

Diese CSS-Datei lädst Du in den Ordner… und dann bindest Du sie am besten erst mal über den Theme Manager ein:

 ![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/2/2273c1cc48698b93d31e4e463ebdb27530ccaedc.png)

Hier mal der Pfad zum Kopieren:

Normalerweise macht man das eigentlich anders bei Shopware, aber so geht es auch.

Ach ja, vergiss ja nicht „DEIN-THEME-NAME“ anzupassen!!!

Und…, hoffentlich lernst Du jetzt auch was dabei!??

![Wink](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/wink.png "Wink")

---

<div class="post-metadata">

**Author:** ![HenkEvans](https://avatars.discourse-cdn.com/v4/letter/h/fbc32d/32.png) [@HenkEvans](https://forum.shopware.com/u/HenkEvans)\
**Post date:** [16. April 2019 um 15:40 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/6 "2019-04-16T15:40:44Z")

</div>

Sehr schön.

Vielen Dank, das hat schon mal funktioniert.&nbsp; ![Thumb-Up](https://forum.shopware.com/plugins/CKEditor/plugins/smiley/images/thumb-up.png "Thumb-Up")

&nbsp;

Jetzt bräuchte ich nur noch einen Tipp, wie ich einen einzelnen Navigations-Link anspreche.

Konkret möchte ich den äußersten rechten Navi-Link anders als die anderen Navi-Links rechtsbündig und farblich anders gestalten.

---

<div class="post-metadata">

**Author:** ![HenkEvans](https://avatars.discourse-cdn.com/v4/letter/h/fbc32d/32.png) [@HenkEvans](https://forum.shopware.com/u/HenkEvans)\
**Post date:** [17. April 2019 um 21:55 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/7 "2019-04-17T21:55:20Z")

</div>

push.

Mir fehlt ja nur noch diese eine Info zum Glück.&nbsp; ![Wink](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/b3785da0cbf2c8566cb535dcf55b2730b5224899.png "Wink")

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [23. April 2019 um 16:40 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/8 "2019-04-23T16:40:34Z")

</div>

Na dann schau Dir das hier mal an und lerne:&nbsp;[CSS :last-child Selector](https://www.w3schools.com/csSref/sel_last-child.asp)

---

<div class="post-metadata">

**Author:** ![Murmeltier](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/murmeltier/32/16126_2.png) [@Murmeltier](https://forum.shopware.com/u/Murmeltier)\
**Post date:** [23. April 2019 um 17:00 UTC](https://forum.shopware.com/t/header-navigation-links-formatieren/58994/9 "2019-04-23T17:00:48Z")

</div>

```
.navigation--list-wrapper > ul > li:last-child > a > span {color:red;}

```

&nbsp;
